前言

  在前端页面开发、小程序开发过程中,经常会用到定时器。定时器的需求主要分为:指定时间执行、间隔一段时间执行,有时需要反复执行,有时只需执行一次。

  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 基本一致。

简单执行

微信小程序JS定时器setTimeout与setInterval使用方法_延迟执行微信小程序JS定时器setTimeout与setInterval使用方法_延迟执行_02

setInterval(function () {
// 需要执行的代码
console.log('定时器执行了')
}, 2000); // 2000为毫秒级参数,表示2秒

View Code


定时器执行函数(不带参数)

微信小程序JS定时器setTimeout与setInterval使用方法_延迟执行微信小程序JS定时器setTimeout与setInterval使用方法_延迟执行_02

// 测试延迟执行的函数
function Fun1() {
alert("执行定时器(不带参数)");
}

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

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

// -------- 方法三
setInterval(Fun1, 2000); //注意这里调用的函数不加括号

// -------- 方法四
setInterval('Fun1()',2000); //注意这里调用的函数需要加括号

View Code


定时器执行函数(带参数)

微信小程序JS定时器setTimeout与setInterval使用方法_延迟执行微信小程序JS定时器setTimeout与setInterval使用方法_延迟执行_02

// 测试延迟执行的函数
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); //注意这里调用的函数需要加括号

View Code


停止定时器

  停止定时器使用 clearInterval,需要传入定时器 ID

微信小程序JS定时器setTimeout与setInterval使用方法_延迟执行微信小程序JS定时器setTimeout与setInterval使用方法_延迟执行_02

function Fun3(str1) {
alert(str1);
}
//设置定时器
var timer=setInterval(Fun3,2000,"参数1");
//清除指定定时器
clearInterval(timer)

View Code


微信小程序中使用

  在微信小程序开发过程中,经常会用到定时器。在使用时和 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);
},
})






​​