微信小程序JS定時器setTimeout與setInterval使用方法

前言

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

　　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