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

目录
相关文章
|
SQL 存储 NoSQL
SQL vs. NoSQL:如何根据大数据需求选择合适数据库
【4月更文挑战第8天】本文对比分析了SQL与NoSQL数据库在大数据项目中的应用。SQL数据库适合结构化数据、强一致性和复杂事务处理,如金融系统,而NoSQL则适用于半结构化和非结构化数据、高并发及大数据场景,如社交网络。选择时应考虑业务需求、技术栈、团队经验和成本效益,以找到最佳解决方案。随着技术发展,NewSQL和Multi-model数据库也提供了更多选择。
977 0
|
SQL 存储 数据库
基于Web技术的在线考试系统的设计与实现(论文+源码)_kaic
基于Web技术的在线考试系统的设计与实现(论文+源码)_kaic
|
消息中间件 存储 负载均衡
Kafka【付诸实践 01】生产者发送消息的过程描述及设计+创建生产者并发送消息(同步、异步)+自定义分区器+自定义序列化器+生产者其他属性说明(实例源码粘贴可用)【一篇学会使用Kafka生产者】
【2月更文挑战第21天】Kafka【付诸实践 01】生产者发送消息的过程描述及设计+创建生产者并发送消息(同步、异步)+自定义分区器+自定义序列化器+生产者其他属性说明(实例源码粘贴可用)【一篇学会使用Kafka生产者】
992 4
|
缓存 小程序
微信小程序使用vant组件样式不生效的问题
微信小程序使用vant组件样式不生效的问题
1742 0
|
JSON 小程序 数据格式
微信小程序 - 设置单个页面/导航栏/TabBar等背景颜色
微信小程序 - 设置单个页面/导航栏/TabBar等背景颜色
1775 0
微信小程序 - 设置单个页面/导航栏/TabBar等背景颜色
|
JSON 小程序 JavaScript
微信小程序调用json数据接口并解析
微信小程序调用json数据接口并解析
890 0
|
JavaScript
Vue.js 中父组件调用子组件的方法
Vue.js 中父组件调用子组件的方法
1331 2
|
JavaScript
【Vue面试题八】、为什么data属性是一个函数而不是一个对象?
这篇文章解释了为什么在Vue中组件的`data`属性必须是一个函数而不是一个对象。原因在于组件可能会有多个实例,如果`data`是一个对象,那么这些实例将会共享同一个`data`对象,导致数据污染。而当`data`是一个函数时,每次创建组件实例都会返回一个新的`data`对象,从而确保了数据的隔离。文章通过示例和源码分析,展示了Vue初始化`data`的过程和组件选项合并的原理,最终得出结论:根实例的`data`可以是对象或函数,而组件实例的`data`必须为函数。
【Vue面试题八】、为什么data属性是一个函数而不是一个对象?
|
人工智能 算法 自动驾驶
智能时代的伦理困境:AI技术的道德边界
【7月更文挑战第26天】在AI技术的飞速发展中,我们不仅见证了科技的奇迹,也面临着前所未有的伦理问题。本文探讨了人工智能带来的道德挑战,包括隐私侵犯、自动化失业、算法偏见以及决策责任归属等问题。通过分析这些伦理困境,文章旨在引发对AI技术应用中道德边界的深入思考和讨论。
|
JavaScript 开发工具 git
Three.js第1篇,Three.js新手教学,如何在项目中使用Three.js(three.js使用流程详细,three.js的使用方式,three.js创建3d物体)
Three.js封装了WebGL的底层细节,是一款运行在浏览器中的 3D 引擎,可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象,目前在Git上已经拥有90k+的star。
778 0
Three.js第1篇,Three.js新手教学,如何在项目中使用Three.js(three.js使用流程详细,three.js的使用方式,three.js创建3d物体)