前言

　　在前端頁面開發、小程式開發過程中，經常會用到定時器。定時器的需求主要分為：指定時間執行、間隔一段時間執行，有時需要反覆執行，有時只需執行一次。

　　setTimeout 與 setInterval 提供了定時任務的功能，不過他們的作用有所區別。

• setTimeout：在指定的延遲時間以後呼叫一個函式或者執行一個程式碼片斷，只執行一次
• setInterval：週期性地呼叫一個函式(function)或者執行一段程式碼，重複執行

setTimeout

　　微信開發者文件地址：https://developers.weixin.qq.com/miniprogram/dev/reference/api/setTimeout.html

　　設定一個定時器，在指定的毫秒數後呼叫函式或計算表示式。返回值為該定時器的 ID，在刪除定時器時需要傳入定時器 ID。

　　setTimeout 的寫法有很多種，根據不同場景進行選擇。

簡單執行

setTimeout(function () {
    //  需要執行的程式碼
    console.log('定時器執行了')
}, 2000); // 2000為毫秒級引數，表示2秒

定時器執行函式（不帶引數）

// 測試延遲執行的函式
function Fun1() {
    alert("執行定時器（不帶引數）");
}

// -------- 方法一
setTimeout(function(){
    Fun1();
}, 
 
2000);

// -------- 方法二
setTimeout(() => {
    Fun1();
}, 2000);

// -------- 方法三
setTimeout(Fun1, 2000);  //注意這裡呼叫的函式不加括號

// -------- 方法四
setTimeout('Fun1()',2000);  //注意這裡呼叫的函式需要加括號

定時器執行函式（帶引數）

// 測試延遲執行的函式
function Fun2(str1,str2) {
    alert("執行定時器（帶引數）"+str1+str2);
}

// -----------方法一
setTimeout(function(){
    Fun2(
 
'123','456');
}, 2000);

// -----------方法二
setTimeout(() => {
     Fun2('123','456');
}, 2000);


// -----------方法三
setTimeout(Fun2, 2000,'引數1內容','引數2內容');  //注意這裡呼叫的函式不加括號

// -----------方法四
setTimeout('Fun2("引數1內容","引數2內容")',2000);  //注意這裡呼叫的函式需要加括號

停止定時器

　　停止定時器使用 clearTimeout，需要傳入定時器 ID

function Fun3(str1) {
  alert(str1);
}
//設定定時器
var timerID=setTimeout(Fun3,2000,"引數1");

//清除指定定時器
clearTimeout(timerID)

setInterval

　　微信開發者文件地址：https://developers.weixin.qq.com/miniprogram/dev/reference/api/setInterval.html

　　用於在間隔指定的毫秒數後呼叫函式或計算表示式,重複執行，寫法與 setTimeout 基本一致。

簡單執行

setInterval(function () {
    //  需要執行的程式碼
    console.log('定時器執行了')
}, 2000); // 2000為毫秒級引數，表示2秒

定時器執行函式（不帶引數）

// 測試延遲執行的函式
function Fun1() {
    alert("執行定時器（不帶引數）");
}

// -------- 方法一
setInterval(function(){
    Fun1();
}, 2000);

// -------- 方法二
setInterval(() => {
    Fun1();
}, 2000);

// -------- 方法三
setInterval(Fun1, 2000);  //注意這裡呼叫的函式不加括號

// -------- 方法四
setInterval('Fun1()',2000);  //注意這裡呼叫的函式需要加括號

定時器執行函式（帶引數）

// 測試延遲執行的函式
function Fun2(str1,str2) {
    alert("執行定時器（帶引數）"+str1+str2);
}

// -----------方法一
setInterval(function(){
    Fun2('123','456');
}, 2000);

// -----------方法二
setInterval(() => {
     Fun2('123','456');
}, 2000);


// -----------方法三
setInterval(Fun2, 2000,'引數1內容','引數2內容');  //注意這裡呼叫的函式不加括號

// -----------方法四
setInterval('Fun2("引數1內容","引數2內容")',2000);  //注意這裡呼叫的函式需要加括號

停止定時器

　　停止定時器使用 clearInterval，需要傳入定時器 ID

function Fun3(str1) {
  alert(str1);
}
//設定定時器
var timer=setInterval(Fun3,2000,"引數1");
//清除指定定時器
  clearInterval(timer)

微信小程式中使用

　　在微信小程式開發過程中，經常會用到定時器。在使用時和 JS 沒什麼區別，不過小程式在退出頁面、隱藏頁面時會有停止、清除定時器的需求，不然再次訪問該頁面時，會有兩個（多個）定時器同時在跑，可惡的 bug 就揮之不去了。

data: {
    Numbers: 0,
    NumbersTimeOut: 0,
    Interval: null, // 定時器宣告時賦值
    timeOut: null  // 定時器宣告時賦值
},


/**
* 生命週期函式--監聽頁面隱藏
*/
onHide: function () {
    let that = this
    clearInterval(that.data.Interval);
    clearTimeout(that.data.timeOut);
},

/**
* 生命週期函式--監聽頁面解除安裝
*/
onUnload: function () {
    let that = this
    clearInterval(that.data.Interval);
    clearTimeout(that.data.timeOut);
    },
})

參考：https://www.cnblogs.com/roseAT/p/10733627.html