前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信小程序 定时器setInterval、setTimeout,简单易用

微信小程序 定时器setInterval、setTimeout,简单易用

作者头像
yechaoa
发布于 2022-06-10 05:12:57
发布于 2022-06-10 05:12:57
3.8K11
代码可运行
举报
文章被收录于专栏:移动开发专栏移动开发专栏
运行总次数:1
代码可运行

setTimeout

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
      setTimeout(function() {
         console.log('doSomething')
      }, 2000);
  • 上面就是一个2s的定时器,最基础的简单用法。
  • 这个方法也可以返回一个id,即定时器id,用来清除定时,比如:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
clearTimeout(timeoutID)

setInterval

setIntervalsetTimeout的使用差别不大,参数都是一样的,区别就在于setTimeout是到时执行一次,setInterval是根据设置的时间来回调的,比如每秒回调一次。

下面以一个获取验证码的场景来简单示例下:

业务:点击获取验证码按钮之后开启一个60s的倒计时,并置灰按钮,60s之后恢复可点击状态。

1,data中定义参数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
data: {
     color: "#ff6f10", //按钮颜色
     disabled: false, //是否可以点击
     getCode: "获取验证码", //显示文字
},

2,wxml中的引用

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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)
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-08-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
1 条评论
热度
最新
厉害
厉害
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
微信小程序登录与注册验证码倒计时的效果实现
可以看到,我们在点击获取验证码以后,就开始倒计时了,正常都是从60s倒计时的,这里为了演示方便,我从6s开始的。可以看到倒计时结束后,按钮又恢复了可以点击的状态。
编程小石头
2020/10/22
2.2K0
微信小程序登录与注册验证码倒计时的效果实现
微信小程序 - 通用页面(登录、注册、找回密码)
点击登录时,动态设置data属性值,改变登录按钮文本,背景色,显示loading动画,不可点击
用户5997198
2019/09/02
19.4K1
微信小程序 - 通用页面(登录、注册、找回密码)
定时器setTimeout和setInterval的简单应用
本文简单利用定时器setTimeout和setInterval举了两个小栗子:定时炸弹和1-100递增
全栈程序员站长
2022/11/09
6440
JavaScript设置定时器、取消定时器及执行机制解析
今天整理了一下 JavaScript 定时器,顺便了解了一下 JavaScript 的运行机制,现在记录一下。
德顺
2019/11/12
5.1K0
JavaScript 定时器 setTimeout、setInterval
定时器在javascript中的作用 1、制作动画 2、异步操作 3、函数缓冲与节流 定时器类型及语法 示例代码如下: /* 定时器: setTimeout 只执行一次的定时器 clearTimeout 关闭只执行一次的定时器 setInterval 反复执行的定时器 clearInterval 关闭反复执行的定时器 */ var time1 = setTimeout(myalert,2000); var time2 = setInterval(
Devops海洋的渔夫
2019/05/30
1K0
微信小程序实现点击获取验证码倒计时结束可再点击功能
效果图 js Page({ data: { //点击前的文本内容 text: '发送验证码', //控制按钮能否点击 disabled: false, //倒计时时间 time: 60, //定时器 timer: '' }, //点击方法 send: function() { //将按钮设置为禁用 this.setData({ disabled: true }) //给定时器赋值 this.data.ti
peng_tianyu
2022/12/15
1.1K0
微信小程序实现点击获取验证码倒计时结束可再点击功能
小程序验证码倒计时
现在好多小程序都没有用到手机号的登录,因为可以直接调用微信的接口,getPhoneNumber,因为我们为了保持公众号,小程序,app后台的一致性,,又做了手机号的登录。 问题: 简单描述一下功能:输入手机号,点击获取验证码。我必须在点击那个获取验证按钮之前,在js中获取手机号。 如何获取到input提交之前的输入值呢? 3.小程序的收取短信的倒计时方法? 解决方法: 微信对input的组件,提供了多个事件,看来只能通过这些事件去实现 单个input的值的获取。bindblur ,失去焦点事件,e
honey缘木鱼
2018/06/13
1.8K0
微信小程序发送短信验证码完整实例
微信小程序注册完整实例,发送短信验证码,带60秒倒计时功能,无需服务器端。效果图:
用户4432598
2019/01/06
10.3K1
【黄啊码】微信小程序倒计时秒杀功能
在使用完定时器后一定要清除定时器,否则定时器将一直运行,占用程序资源,甚至程序报错。关于有效清除定时器方法在微信开放社区的讨论:微信小程序使用clearInterval清除定时函数无效? | 微信开放社区
黄啊码
2021/09/26
8140
JavaScript基础-定时器:setTimeout, setInterval
在JavaScript的世界里,定时器是实现异步编程不可或缺的工具,它允许我们按计划执行某些代码片段。setTimeout和setInterval作为两大核心定时器函数,广泛应用于页面动画、定时更新、延时操作等多种场景。本文将深入浅出地介绍这两个函数的基本用法、常见问题、易错点及避免策略,并通过代码示例加以说明。
Jimaks
2024/06/14
7100
JavaScript基础-定时器:setTimeout, setInterval
JavaScript——定时器
1. 定时器的介绍 定时器就是在一段特定的时间后执行某段程序代码。 2. 定时器的使用: js 定时器有两种创建方式: setTimeout(func[, delay, param1, param2, ...]) :以指定的时间间隔(以毫秒计)调用一次函数的定时器 setInterval(func[, delay, param1, param2, ...]) :以指定的时间间隔(以毫秒计)重复调用一个函数的定时器 setTimeout函数的参数说明: 第一个参数 func , 表示定时器要执行的函数名
落雨
2022/04/21
30K0
js中settimeout和setInterval区别_JavaScript set
注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止
全栈程序员站长
2022/11/09
2.1K0
JavaScript定时器:setTimeout与setInterval 定时器与异步循环数组
深入了解一下 关于JavaScript定时器的知识; setTimeout与setInterval简述 setTimeout与setInterval使用方法基本相同,他们接受两个参数,第一个参数是需要执行的函数,第二个参数是执行的延迟时间,看栗子: setTimeout(function(){ alert("hello"); //第一个参数为函数 你可以传入函数名 或一个匿名函数 },3000);     //第二个参数为延迟时间 标识多少毫秒之后执行前一个函数 setInt
前朝楚水
2018/04/03
2.3K0
利用setTimeout和SetInterval构建Javascript计时器
看到了一篇深入浅出的讲解setTimeout和setInterval的例子,直接讲英文贴出来吧,也不是很难。
大江小浪
2018/07/24
8620
从零开始学 Web 之 BOM(二)定时器
多次点击“摇起来”按钮的时候,timeId 的值会有多个,而停止的时候,只会清理最后一个值,其他的值对应的定时器没有清理。
Daotin
2018/08/31
1.4K0
验证码倒计时的注册页面
原型图 需求:手机号验证 发送验证码之后开始60S倒计时 60s以后如果没有填写验证码,可重新发送 <!doctype html> <html> <head> <meta charset="utf-8"> <title>注册</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con
王小婷
2018/06/01
1.2K0
微信小程序开发实战(29):控制背景音乐
小程序还提供一组用于播放背景音乐的API,背景音乐和普通音乐的区别就是背景音乐在当前页面播放后,即使切换到当前小程序的其他页面,也不会停止播放。但当小程序退出后,背景音乐就会停止播放。
蒙娜丽宁
2020/09/07
2.9K0
微信小程序开发实战(29):控制背景音乐
从一个超时程序的设计聊聊定时器的方方面面
企业项目开发中经常有这样一个逻辑场景:在界面上显示倒计时,时间到了给出提示,禁止用户操作。
LIYI
2022/03/08
1.5K0
从一个超时程序的设计聊聊定时器的方方面面
【如果你要学JS {十一}】——window常见事件,灵活运用定时器
BOM ( Browser Object Model )即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心 对象是window,BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。 BOM缺乏标准, JavaScript 语法的标准化组织是ECMA , DOM的标准化组织是W3C , BOM最初是Netscape浏 览器标准的一部分。
像素人
2023/12/24
1.1K0
【如果你要学JS {十一}】——window常见事件,灵活运用定时器
Vue中 使用定时器 (setInterval、setTimeout)[通俗易懂]
js中定时器有两种,一个是循环执行 setInterval,另一个是定时执行 setTimeout。
全栈程序员站长
2022/11/10
8.9K0
Vue中 使用定时器 (setInterval、setTimeout)[通俗易懂]
推荐阅读
相关推荐
微信小程序登录与注册验证码倒计时的效果实现
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验