微信小程序 定时器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)

目录
相关文章
|
存储 监控 搜索推荐
在生产环境中部署Elasticsearch:最佳实践和故障排除技巧——安装篇(一)
在生产环境中部署Elasticsearch:最佳实践和故障排除技巧——安装篇(一)
|
SQL 存储 数据库
基于Web技术的在线考试系统的设计与实现(论文+源码)_kaic
基于Web技术的在线考试系统的设计与实现(论文+源码)_kaic
|
前端开发 JavaScript Java
Springboot2.x+Websocket+js实现实时在线文本协同编辑,并展示协同用户
Springboot2.x+Websocket+js实现实时在线文本协同编辑,并展示协同用户
Springboot2.x+Websocket+js实现实时在线文本协同编辑,并展示协同用户
|
缓存 小程序
微信小程序使用vant组件样式不生效的问题
微信小程序使用vant组件样式不生效的问题
1795 0
|
API 容器
鸿蒙ArkTS | Badge 信息标记组件自学指南
`Badge` 是 HarmonyOS ArkUI 中用于信息标记的容器组件,可附加在图标、按钮或列表项上,提供红点、数字(如 1~99+)或文本(如 "New"、"Hot")等提示功能。支持位置设置与样式自定义,适合状态提醒、消息通知等场景。核心参数包括 `value`(字符串内容)、`count`(数字提醒)、`maxCount`(上限显示)、`position`(位置)和 `style`(样式)。从 API v12 开始,显隐支持 `scale` 动效,提升交互体验。注意 `Badge` 仅包裹单个子组件,不影响其布局结构。
645 10
鸿蒙ArkTS | Badge 信息标记组件自学指南
|
JSON 小程序 数据格式
微信小程序 - 设置单个页面/导航栏/TabBar等背景颜色
微信小程序 - 设置单个页面/导航栏/TabBar等背景颜色
1826 0
微信小程序 - 设置单个页面/导航栏/TabBar等背景颜色
|
机器学习/深度学习 数据采集 人工智能
MATLAB在机器学习模型训练与性能优化中的应用探讨
本文介绍了如何使用MATLAB进行机器学习模型的训练与优化。MATLAB作为强大的科学计算工具,提供了丰富的函数库和工具箱,简化了数据预处理、模型选择、训练及评估的过程。文章详细讲解了从数据准备到模型优化的各个步骤,并通过代码实例展示了SVM等模型的应用。此外,还探讨了超参数调优、特征选择、模型集成等优化方法,以及深度学习与传统机器学习的结合。最后,介绍了模型部署和并行计算技巧,帮助用户高效构建和优化机器学习模型。
MATLAB在机器学习模型训练与性能优化中的应用探讨
|
JSON 小程序 JavaScript
微信小程序调用json数据接口并解析
微信小程序调用json数据接口并解析
924 0
|
JavaScript
Vue.js 中父组件调用子组件的方法
Vue.js 中父组件调用子组件的方法
1361 2
|
JavaScript
【Vue面试题八】、为什么data属性是一个函数而不是一个对象?
这篇文章解释了为什么在Vue中组件的`data`属性必须是一个函数而不是一个对象。原因在于组件可能会有多个实例,如果`data`是一个对象,那么这些实例将会共享同一个`data`对象,导致数据污染。而当`data`是一个函数时,每次创建组件实例都会返回一个新的`data`对象,从而确保了数据的隔离。文章通过示例和源码分析,展示了Vue初始化`data`的过程和组件选项合并的原理,最终得出结论:根实例的`data`可以是对象或函数,而组件实例的`data`必须为函数。
【Vue面试题八】、为什么data属性是一个函数而不是一个对象?