微信小程序--setTimeout

setTimeout

语法

setTimeout(function callback, number delay, any rest)

参数解释：

• function callback：回调函数
• number delay：延迟的时间，函数的调用会在该延迟之后发生，单位 ms。
• any rest：param1, param2, …, paramN 等附加参数，它们会作为参数传递给回调函数。

返回值：

• number：定时器的编号，这个值可以传递给 clearTimeout 来取消该定时。

作用

设定一个定时器。在定时到期以后执行注册的回调函数

海轰的理解：利用setTimeout函数，可以设置一定时间后执行一个函数

场景一

自定义函数

300ms后，打印字符“hello world”

     setTimeout(function(){
          console.log("hello world")
        //  可以自定义300ms后执行的操作 
        //   这里以打印字符串为例
      },300)

结果：

场景二：

使用现成的函数

300ms后，执行同页面下的一个函数（以自定义函数print()为例）

  print:function(){
      console.log("hello world")
  },
  // 假设setTimeout函数在onLoad中触发
  onLoad:function(){
      let k=this
      setTimeout(k.print,300)
  },

结果：

场景三

带参数（一个参数）

  print:function(e){
      console.log("hello world "+e)
  },
  onLoad:function(){
      let k=this
      setTimeout(k.print,300,"haihongPro")
  },

结果：

带参数（两个参数）

  print:function(e,f){
      console.log("hello world "+e+f)
  },
  onLoad:function(){
      let k=this
      setTimeout(k.print,300,"haihongPro"," hh")
  },

结果：

多个参数以此类推

场景三

清除定时器

setTimeout还有一个返回值，也就是定时器的编号，类型是number

测试代码：

       let a = setTimeout(function () {
            console.log("hello world")
        }, 300)
        let b = setTimeout(function () {
            console.log("hello world")
        }, 300)
        console.log(a)
        console.log(b)

结果：

可以看出：其实每一个定时器都是有一个编号id的

那么有什么作用呢？

答：可以通过这个id来消除这个定时器。【虽然定时器是在一定时间后执行某一个函数，只执行一次，但是每次触发该函数时，都会产生调用，有时我们只需要在程序生命周期里只需执行唯一的一次，所以就需要执行一次后进行删除，这时就需要用到clearTimeout】

测试代码：

        let a = setTimeout(function () {
            console.log("hello world")
        }, 300)
        clearTimeout(a)// 清除定时器a

场景四

实现每隔一段时间调用某一个函数（递归）

比如：每隔3000ms，打印字符串“HaihongPro”

wxml页面：

<button bindtap="test">测试</button>

js页面：

  test:function(){
        let k=this
        let a=setTimeout(function(){
            console.log("HaihongPro")
            k.test()//递归
        },3000)
    },

点击按钮后，便可以实现每隔3000ms打印字符串了

结果：

说明

参考：https://developers.weixin.qq.com/miniprogram/dev/api/base/timer/setTimeout.html