微信小程序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