微信小程序setInterval定时函数新手使用的超详细教程

目录

• 1、setInterval的理解
• 2、setInterval放在微信小程序onshow函数里
• 3、setInterval具体使用
• 4、离开当前页面关闭 setInterval定时函数
• 附：微信小程序定时器setInterval（）的使用注意事项
• 总结

1、setInterval的理解

（1）setInterval理解

setInterval定时函数，就是延迟多长时间不停的调用 setInterval中的函数，想具体了解 setInterval函数，我们先看一下 setInterval函数组成部分。

（2）setInterval组成

setInterval(function () {},时间)。function () {}就是不停执行函数，时间就是延迟多久不断地执行，重点function () {}函数

具体示例：

 setInterval(function () {
                 //.toClock1()是具体函数，写在外边
                 _this.toClock1();}, 6000);

（3）setInterval需要关闭

使用clearInterval（）去关闭，具体使用看下面的内容

clearInterval（）

2、setInterval放在微信小程序onshow函数里

onShow：页面显示或从后台跳回小程序时显示此页面时触发，从跳转页面返回时触发，不能传递参数

3、setInterval具体使用

（1）设置全局变量timer（timer随便起）

//在微信小程序data中写如下代码，timer全局变量
 data: {
    timer: null,
  },

（2）onshow写setInterval函数

onShow: function () {
      const _this = this
       //定时器  函数赋值给timer  方便clearInterval（）使用
       _this.data.timer = setInterval(
         function () {
        _this.toClock1();        
        }, 6000);

        _this.setData({
          timer:_this.data.timer
        });
  },

toClock1()函数

//定时函数执行的内容  自己发挥   写自己的代码
toClock1(){
    console.log(this.data.timer)
}

4、离开当前页面关闭 setInterval定时函数

代码放在onhide里边

onHide: function () {
//关闭clearInterval定时函数
    clearInterval(this.data.timer);
    this.setData({
      timer: null
    });
    console.log(this.data.timer)
  },

附：微信小程序定时器setInterval（）的使用注意事项

setInterval（function(){}, number 时间间隔/ms）

注意在setInterval中定义的函数中使用  this  指向的是该计时器，若要用到页面数据应如下操作：

let that=this
setInterval(function(){
   that.data.a=0;
},number 时间间隔/ms)

通过在setInterval外面设置一个变量 that 获得 页面 this 的引用,后进行操作

总结

到此这篇关于微信小程序setInterval定时函数使用的文章就介绍到这了,更多相关微信小程序setInterval定时函数内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！