微信小程序setInterval定时函数

时间:2022-09-28 1029179954 人气:0

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 的引用,后进行操作

总结

加载全部内容