微信小程序 定时器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 存储 数据库
基于Web技术的在线考试系统的设计与实现(论文+源码)_kaic
基于Web技术的在线考试系统的设计与实现(论文+源码)_kaic
|
SQL 存储 NoSQL
SQL vs. NoSQL:如何根据大数据需求选择合适数据库
【4月更文挑战第8天】本文对比分析了SQL与NoSQL数据库在大数据项目中的应用。SQL数据库适合结构化数据、强一致性和复杂事务处理,如金融系统,而NoSQL则适用于半结构化和非结构化数据、高并发及大数据场景,如社交网络。选择时应考虑业务需求、技术栈、团队经验和成本效益,以找到最佳解决方案。随着技术发展,NewSQL和Multi-model数据库也提供了更多选择。
955 0
|
11月前
|
设计模式 开发者 容器
23.[HarmonyOS NEXT Column案例四(下)] 响应式卡片内容实现与样式定制
在上一部分中,我们介绍了响应式设计的基本概念、Column组件的水平对齐能力以及如何通过条件渲染实现响应式宽度设置。本教程将继续深入探讨响应式卡片内容的详细实现,包括图片和文本组件的属性设置、卡片样式的定制以及完整代码的分析,帮助开发者掌握更全面的响应式设计技巧。
185 4
|
JSON 小程序 数据格式
微信小程序 - 设置单个页面/导航栏/TabBar等背景颜色
微信小程序 - 设置单个页面/导航栏/TabBar等背景颜色
1736 0
微信小程序 - 设置单个页面/导航栏/TabBar等背景颜色
|
12月前
|
Android开发 开发者
HarmonyOS基础组件:Button三种类型的使用
本文介绍HarmonyOS中的Button使用,随着HarmonyOS明年不再兼容Android原生功能,学习其开发语言变得重要。相比Android,HarmonyOS的Button功能更丰富、扩展性更高,支持三种样式(普通、胶囊、圆形)及自定义样式,减少代码量并简化使用方式。常用属性包括type、backgroundColor、fontSize等,构造函数灵活配置。文章通过示例展示了如何实现带图片和文字的自定义Button,体现了HarmonyOS强大的UI绘制能力和便捷性。
1088 0
|
JSON 小程序 JavaScript
微信小程序调用json数据接口并解析
微信小程序调用json数据接口并解析
866 0
|
JavaScript
【Vue面试题八】、为什么data属性是一个函数而不是一个对象?
这篇文章解释了为什么在Vue中组件的`data`属性必须是一个函数而不是一个对象。原因在于组件可能会有多个实例,如果`data`是一个对象,那么这些实例将会共享同一个`data`对象,导致数据污染。而当`data`是一个函数时,每次创建组件实例都会返回一个新的`data`对象,从而确保了数据的隔离。文章通过示例和源码分析,展示了Vue初始化`data`的过程和组件选项合并的原理,最终得出结论:根实例的`data`可以是对象或函数,而组件实例的`data`必须为函数。
【Vue面试题八】、为什么data属性是一个函数而不是一个对象?
|
机器学习/深度学习 人工智能 搜索推荐
构建基于AI的个性化新闻推荐系统:技术探索与实践
【6月更文挑战第5天】构建基于AI的个性化新闻推荐系统,通过数据预处理、用户画像构建、特征提取、推荐算法设计及结果评估优化,解决信息爆炸时代用户筛选新闻的难题。系统关键点包括:数据清洗、用户兴趣分析、表示学习、内容及协同过滤推荐。实践案例证明,结合深度学习的推荐系统能提升用户体验,未来系统将更智能、个性化。
1116 3
|
JavaScript 开发工具 git
Three.js第1篇,Three.js新手教学,如何在项目中使用Three.js(three.js使用流程详细,three.js的使用方式,three.js创建3d物体)
Three.js封装了WebGL的底层细节,是一款运行在浏览器中的 3D 引擎,可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象,目前在Git上已经拥有90k+的star。
754 0
Three.js第1篇,Three.js新手教学,如何在项目中使用Three.js(three.js使用流程详细,three.js的使用方式,three.js创建3d物体)
|
编解码
AutoJS4.1.0实战教程---抖音极速版签到和领日常
AutoJS4.1.0实战教程---抖音极速版签到和领日常
391 1

热门文章

最新文章