关于微信小程序中定时器的几点思考

今天在写小程序时遇到每隔一段时间就和目标蓝牙尝试连接一次的场景,故研究了一下定时器的应用

两种定时器

setTimeout(func, time)

返回一个定时器,并在时长time之后将func执行一次,适合于倒计时的场景

setInterval(func, interval)

返回一个定时器,每经过时间间隔interval执行一次func

实现某一段时间内固定时间间隔重复执行某个函数

有多种实现方式,for循环与setTimeout的结合、setTimeout与setInterval的结合、setInterval和控制变量的结合等

一、结合setTimeout和setInterval

//以下代码可以直接在onLoad中执行
    var timer = setInterval(function(s) {  //返回一个定时器每隔1.5秒进行一次toast
      wx.showToast({
        title: "123",
        duration: 1000
      })
    }, 1500)
    setTimeout(function() {  //5秒后终止timer
      clearInterval(timer)
    }, 5000)

二、使用一个变量进行计数

    var v = 1
    var timer = setInterval(function(s) {  //在定时器的内部通过控制变量v判断是否需要终止
      v += 1
      wx.showToast({
        title: "123",
        duration: 1000
      })
      //执行三次以后v=4,故toast三次以后停止
      if (v == 4){
        clearInterval(timer)
      }
    }, 1500)

三、for循环与setTimeout结合

for(var i = 0; i <= 4; i++){  //以1秒的时间间隔执行func5次
	setTimeout(func, 1000)
}

定时器中的函数如果需要接收参数

注意到上面的方法中func接收一个参数s,但是这个参数s在func的函数体中没有用到,所以用以上的方法是可行的,但是如果函数体中需要用到该参数s,那么使用

var timer = setInterval(func(s){}, interval)

这种方式是无法传入参数s的,这时可以将定时器包装在一个函数内部,该函数接收定时器需要的参数,并返回定时器

Page({
  onLoad: function(option){
    var timer = this.timer("func需要的参数")
    setTimeout(function(){
      clearInterval(timer)
    },5000)
  },
  timer: function(s) {
    return setInterval(function() {  //得到一个定时器并将其返回
      wx.showToast({
        title: s,
        duration: 1000
      })
    }, 1500)
  }
})
发布了12 篇原创文章 · 获赞 5 · 访问量 949

猜你喜欢

转载自blog.csdn.net/Seventeen0084/article/details/99312469