微信小程序定时器setInterval、setTimeout，简单易用

古城微笑少年丶 2022-11-27 07:21 735阅读 0赞

# setTimeout #

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

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

clearTimeout(timeoutID)

# setInterval #

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

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

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

### 1，data中定义参数 ###

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

### 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>

### 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)
    }

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