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

目录
相关文章
|
小程序 JavaScript 前端开发
微信小程序(十七)小程序监听返回键跳转事件(安卓返回也适用)
onUnload:function(){ wx.redirectTo({ url: '../index/index' }) wx.navigateTo({ url: '../index/index' }) wx.switchTab({ url: '../../member/member' }) }
1739 0
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
1992 1
微信小程序使用echarts图表(ec-canvas)
|
小程序
微信小程序——如何获取到输入框的值
微信小程序——如何获取到输入框的值
1581 0
|
12月前
|
监控 数据可视化 定位技术
2024年最强看板工具大对比:哪款最适合公司团建旅游活动策划?
本文介绍了5款看板工具(板栗看板、Trello、Asana、Monday.com、ClickUp)及其在公司团建旅游策划中的应用,通过具体案例展示了如何利用这些工具高效管理活动的各个环节,包括目的地规划、任务分配、预算管理、日程安排、团队沟通与反馈等,旨在提升团队协作效率和活动策划质量。
2024年最强看板工具大对比:哪款最适合公司团建旅游活动策划?
|
JSON 前端开发 API
使用微信JS-SDK调用发票接口的完整开发指南
本文介绍了如何使用微信JS-SDK的`chooseInvoiceTitle`接口来调用微信的发票功能。通过微信发票接口,用户可以选择开具个人或单位发票,并获取相关发票信息,如抬头、税号、公司地址等。在文中,详细描述了JS-SDK的初始化、发票接口的调用方式,并提供了完整的代码示例。文章还介绍了如何处理返回的发票信息,帮助开发者快速集成微信发票功能。
527 2
|
小程序 API 开发者
微信小程序授权登录流程以及应用到的API
微信小程序授权登录流程以及应用到的API
830 0
|
JavaScript API
vue3父子组件相互调用方法详解
vue3父子组件相互调用方法详解
|
API UED
深入理解 uni-app 中的加载提示:uni.showLoading
深入理解 uni-app 中的加载提示:uni.showLoading
7303 0
|
JavaScript
如何在vue项目中快速导入marked
如何在vue项目中快速导入marked
734 1