微信小程序短信倒计时60秒提醒功能实现

简介: 背景我们是西安卫生局平台项目,给陕西健康卡完成移动App开发后,进军小程序开发问题迁移到登陆验证码获取,需要有倒计时功能,app使用到setTimeout ,出问题了?!死活递归调用不了耗时整整一个早晨的战斗,什么 外部定义方法啊 内部传递变量啊 等等。

背景
我们是西安卫生局平台项目,给陕西健康卡完成移动App开发后,进军小程序开发

问题
迁移到登陆验证码获取,需要有倒计时功能,app使用到setTimeout ,出问题了?!死活递归调用不了
微信小程序短信倒计时60秒提醒功能实现

耗时
整整一个早晨的战斗,什么 外部定义方法啊 内部传递变量啊 等等。。。最后宣告失败

突破
发现了setInterval倒计时,果然好使。成功运行代码如下

    // 60秒后重新获取验证码
    var inter = setInterval(function () {
      this.setData({
        snsCodeMsg: "重新发送(" + this.data.snsMsgWait + ")",
        snsMsgWait: this.data.snsMsgWait - 1
      });
      if (this.data.snsMsgWait < 0) {
        clearInterval(inter)
        this.setData({
          snsCodeMsg: "获取验证码",
          snsMsgWait: 60
        });
      }
    }.bind(this), 1000);

注意后面的bind绑定,最关键。不然又是未定义,无法使用外围的变量。
微信小程序短信倒计时60秒提醒功能实现

最后
请不要放弃,想要的效果总会出现,坚持换个思路。


沫沫金提供,谢谢你的观看。朋友的软件开发都找我,你也可以。请百度搜索我得名字,你可和我一对一讨论技术。

目录
相关文章
|
XML Java 数据格式
肝了30天总结,史上最全面透彻的Spring核心原理分析和27道高频面试题
在阅读面试题之前,小伙伴们可以先看看我之前发布的系列文章,Spring核心原理包括源码分析和用30个类手写。面试刷题固然很重要,但是知其然知其所以然更重要。
2041 4
肝了30天总结,史上最全面透彻的Spring核心原理分析和27道高频面试题
|
新零售 供应链 监控
蒙牛集团信息技术助理副总裁、CIO张决:双中台助力蒙牛数字化转型 | 阿里CIO学院名人堂
12月3日,2020阿里CIO学院在杭州举行。400位企业CEO、CTO、CIO齐聚一堂,共同探讨企业数字化转型经验。今年新冠 疫情爆发,给企业带来不小挑战,到场嘉宾表示,数字化已经成为企业未来发展最大的确定性。 本次峰会由阿里CIO学院主办。据阿里CIO学院院长洪英介绍,400位嘉宾分别来自央企、国企、民企,都是企业信息化建设的领导者。
蒙牛集团信息技术助理副总裁、CIO张决:双中台助力蒙牛数字化转型  | 阿里CIO学院名人堂
|
测试技术 Linux Docker
Docker部署RPG网页小游戏
Docker部署RPG网页小游戏
664 2
|
人工智能 搜索推荐 安全
AI Agent与具象智能的融合:数字化转型的新趋势
【1月更文挑战第14天】AI Agent与具象智能的融合:数字化转型的新趋势
472 4
AI Agent与具象智能的融合:数字化转型的新趋势
|
运维 资源调度 调度
阿里巴巴任务调度SchedulerX兼容XXL-JOB
阿里巴巴任务调度SchedulerX2.0兼容XXL-JOB任务接口,支持@XxlJob新注解和@JobHandler老注解方式,用户不需要修改一行代码,即可以将XXL-JOB任务在SchedulerX2.0平台上托管。
4452 1
阿里巴巴任务调度SchedulerX兼容XXL-JOB
|
定位技术 UED
基于LeafLet的多点聚合展示markercluster
某场景需求:需要在某地图上综合展示几千个marker,在地图层级比较低的情况,由于展示的数据点较多,会密密麻麻的堆叠在一起,比较影响用户体验(密集恐惧症患者恐怕要晕掉了)。 解决办法:为了让用户获得比较好的体验,在低层级地图下,将多个点聚合成为一个,提高用户体验
1175 0
基于LeafLet的多点聚合展示markercluster
|
移动开发 安全 开发工具
移动支付常见问题汇总
移动支付常见问题解决方案 以下为移动支付产品在联调中出现的一些问题和解决方案。  若是大家在以下解决方案中未能得到解决,或者发现新的问题,可以回复此贴。也可以重新发帖,表述新问题时记得要把问题描述清楚噢。
1874 12
|
数据可视化 机器人 城市大脑
阿里云RPA(机器人流程自动化)精品系列之一:跨网机器人解决方案
本文是阿里云RPA精品系列的开篇之作,主要介绍跨网机器人解决方案的基本概念、技术架构、核心竞争力、适用场景以及实施交付过的一些成功案例,希望能帮助读者解决一些实际业务上的痛点,起到抛砖引玉的效果。
7429 0