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

什么是setInterval函数

setInterval是JavaScript的一种定时器函数，它可以按照指定的时间间隔执行一个指定的函数或者代码段。

对于微信小程序开发者来说，setInterval函数可以应用在定时刷新UI，定时更新数据等场景。

如何使用setInterval函数

setInterval函数需要传入两个参数：第一个参数是定时器函数（也可以是普通函数），第二个参数是时间间隔（以毫秒为单位）。

例如，下面的代码就可以每隔1000毫秒执行一次一段代码:

setInterval(function(){
  console.log("Hello World!");
},1000);

setTimeOut与setInterval的区别

setTimeOut函数与setInterval函数的功能类似，都可以设置定时器，但两者的区别在于：

setTimeOut只会执行一次，执行完毕后不会再次执行，需要手动设置定时器。

setInterval会持续不断地执行，直到手动停止或者页面关闭。

小程序setInterval示例1：实现数字计时器

<text>{{ timeCount }}</text>

var timer = null;

Page({
  data: {
    timeCount: 0,
  },

  //开始计时
  startCount: function () {
    var that = this;
    if (timer) return;
    timer = setInterval(function () {
      that.setData({
        timeCount: that.data.timeCount + 1
      });
    }, 1000);
  },

  //停止计时
  stopCount: function () {
    clearInterval(timer);
    timer = null;
  }
})

以上代码中的计时器每隔1000毫秒会将数字+1，并在页面上更新显示，直到手动停止计时器。

小程序setInterval示例2：实现无限滚动列表

<scroll-view scroll-y="true" style="height: 100%;">
  <view wx:for="{{ list }}" wx:key="{{ index }}">
    <text>{{ item }}</text>
  </view>
</scroll-view>

Page({
  data: {
    list: []
  },

  onLoad: function (options) {
    var that = this;
    var i = 0;
    setInterval(function () {
      that.setData({
        list: that.data.list.concat([i++])
      });
    }, 2000) // 每2秒钟增加数组中的一个元素
  },
})

以上代码中的列表每隔2000毫秒会增加一个元素，一直增长并无限滚动，直到页面关闭为止。