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

简介: 微信小程序 定时器setInterval、setTimeout,简单易用
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)

目录
相关文章
|
5月前
|
JavaScript 前端开发 安全
JavaScript基础-定时器:setTimeout, setInterval
【6月更文挑战第13天】JavaScript中的`setTimeout`和`setInterval`是异步编程的关键工具,用于按计划执行代码。`setTimeout`在延迟后执行一次,而`setInterval`则周期性执行。常见问题包括忘记清除定时器导致内存泄漏,递归使用`setTimeout`可能引发无限递归,以及字符串代码执行的安全隐患。解决方法包括使用`clearTimeout`和`clearInterval`,设置递归终止条件,以及优先使用函数表达式。理解定时器的非精确性并采用错误处理策略也是实践中的重要技巧。通过示例展示了如何延迟显示消息和周期性打印计数。
89 2
|
28天前
|
Web App开发 存储 前端开发
前端开发必备:requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
前端开发必备:requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
102 0
|
4月前
|
存储 前端开发 JavaScript
前端如何优雅的使用定时器?
前端如何优雅的使用定时器?
48 1
|
4月前
|
JavaScript
JS【详解】setTimeout 延时(含清除 setTimeout,计时开始时间,0 秒延时解析,多 setTimeout 执行顺序,setTimeout 应用场景,网红面试题)
JS【详解】setTimeout 延时(含清除 setTimeout,计时开始时间,0 秒延时解析,多 setTimeout 执行顺序,setTimeout 应用场景,网红面试题)
793 0
|
JavaScript
Vue中 使用定时器 (setInterval、setTimeout)
Vue中 使用定时器 (setInterval、setTimeout)
179 0
|
6月前
|
JavaScript
vue 定时器:setInterval和setTimeout使用实例及区别
vue 定时器:setInterval和setTimeout使用实例及区别
120 0
|
6月前
|
前端开发 JavaScript 程序员
(前端面试题)详解 JS 的 setTimeout 和 setInterval 两大定时器
(前端面试题)详解 JS 的 setTimeout 和 setInterval 两大定时器
150 0
|
6月前
|
JavaScript 前端开发
JS实现可以控制的定时器,setInterval,clearInterval
JS实现可以控制的定时器,setInterval,clearInterval
45 0
|
JavaScript
js中两种定时器,setTimeout和setInterval的区别
js中两种定时器,setTimeout和setInterval的区别
83 0
|
小程序 JavaScript
微信小程序防抖
微信小程序防抖
190 0