微信小程序 定时器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)
「智能机器人开发者大赛」官方平台,致力于为开发者和参赛选手提供赛事技术指导、行业标准解读及团队实战案例解析;聚焦智能机器人开发全栈技术闭环,助力开发者攻克技术瓶颈,促进软硬件集成、场景应用及商业化落地的深度研讨。 加入智能机器人开发者社区iRobot Developer,与全球极客并肩突破技术边界,定义机器人开发的未来范式!
更多推荐



所有评论(0)