setTimeout

      setTimeout(function() {
         console.log('doSomething')
      }, 2000);

  

 

  
1
  
2
  
3
 

• 上面就是一个2s的定时器，最基础的简单用法。
• 这个方法也可以返回一个id，即定时器id，用来清除定时，比如：

clearTimeout(timeoutID)

  

 

  
1
 

setInterval

setInterval与setTimeout的使用差别不大，参数都是一样的，区别就在于setTimeout是到时执行一次，setInterval是根据设置的时间来回调的，比如每秒回调一次。

下面以一个获取验证码的场景来简单示例下：

业务：点击获取验证码按钮之后开启一个60s的倒计时，并置灰按钮，60s之后恢复可点击状态。

1，data中定义参数

data: {
     color: "#ff6f10", //按钮颜色
     disabled: false, //是否可以点击
     getCode: "获取验证码", //显示文字
},

  

 

  
1
  
2
  
3
  
4
  
5
 

2，wxml中的引用

<button size="mini" type="default"  plain="true" class='form-code-btn' 
bindtap='sendCode' style='color:{{color}}; border-color: {{color}};background-color:#FFF;' 
disabled="{{disabled}}">{{getCode}}</button>

  

 

  
1
  
2
  
3
 

3，定义的事件sendCode

sendCode: function(e) {
     var that = this;
     var times = 0
     var i = setInterval(function() {
          times++
          if (times >= 60) {
               that.setData({
                    color: "#ff6f10",
                    disabled: false,
                    getCode: "获取验证码",
               })
               clearInterval(i)
          } else {
               that.setData({
                    getCode: "重新获取" + times + "s",
                    color: "#999",
                    disabled: true
               })
          }
     }, 1000)
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
 

• 每秒执行一次，并定义一个变量记录
• 60s之内，设置文字显示、颜色、不可点击
• 之后，同上，并且清除定时器，即clearInterval(i)

文章来源: blog.csdn.net，作者：yechaoa，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/yechaoa/article/details/81985664