setTimeout setInterval 計時器

2023-03-31 19:30:00

setTimeout() 方法用于在指定的毫秒數後調用函數或計算表達式。

傳回值：傳回一個 ID（數字），可以将這個ID傳遞給 clearTimeout() 來取消執行。

案例：點選按鈕開始，停止時間顯示

<div onclick="startStop()" style="width:100px;height: 20px; line-height: 20px; background:red;text-align: center; color:#fff">button</div>

let timer=null
        function showtime(){
            let date=new Date()
            let year=date.getFullYear()
            let month=date.getMonth()+1
            let day=date.getDate()
            let hour=date.getHours()
            let Minutes=date.getMinutes()
            let seconds=date.getSeconds()
            let dataTime=`${year}-${month}-${day} ${hour}:${Minutes>=10 ? Minutes : '0'+Minutes}:${seconds>=10 ? seconds :'0'+seconds }`
            console.log(dataTime) // 2019-4-29 16:02:50
                timer=window.setTimeout(showtime,10000)
        }
        
        function startStop(){
            console.log('timer',timer)
            if(timer){
                clearTimeout(timer)
                timer=null
                console.log('1')
            }else{
                console.log('2')
                showtime() 

            }

        }

setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。

setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或視窗被關閉。由 setInterval() 傳回的 ID 值可用作 clearInterval() 方法的參數。

setTimeout setInterval 計時器

案例：顯示目前時間

<p>顯示目前時間:</p>
<p id="demo"></p>
<button onclick="myStopFunction()">停止時間</button>

var myVar = setInterval(function(){ myTimer() }, 1000);

function myTimer() {
    var d = new Date();
    var t = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = t;
}

function myStopFunction() {
    clearInterval(myVar);
}

參考資料

https://www.runoob.com/jsref/met-win-setinterval.html

轉載于:https://www.cnblogs.com/sunny-shine/p/10791118.html