微信小程序—setTimeOut定时器的问题及解决


Posted in Javascript onJuly 26, 2019

背景

实验室需要将项目的app搬到微信的小程序上,终于知道为什么程序员是手艺人了,只要有需求,就要想方设法去填充这种需求,去年是小程序的元年了可以说,去年冬天一个叫跳一跳的小程序游戏出现在我的微信中,当时就觉得腾讯是真的牛皮。一时间很多的软件小程序版相继出现,各大微信公众号也开始关联小程序。小程序相比于app,有着独特的优势,其中最大的就是没有ios和android平台之分,但是同时也有局限,你给我开发个小程序王者荣耀试试。

定时任务

微信小程序API中有两种定时任务

  • setInterval
  • setTimeOut

这两者都能实现定时任务,比如实现一个定时器,但是建议采用后者setTimeOut,理由是前者并不精确。详细请参考

https://www.zhihu.com/question/20479535

setTimeOut用法

不多说直接上:

var timerName = setTimeOut(function() {
	//循环代码
}, delay)

这里在循环代码处做我们需要循环处理的逻辑,delay是延迟的毫秒数,5秒 = 5 * 1000,timerName是返回的定时器名称,有什么用,因为要取消这个定时器就需要给需要给出取消的定时器名称

clearTimeOut(timerName)


我有一个需求是每五秒获取一次位置

startReportHeart() {
   var timerTem = setTimeout(function () {
     that.heartReport();
   }, app.globalConfig.heart_delay)
   // 保存定时器name
   that.setData({
     timer: timerTem
   })
 },

heartReport()就是获取位置信息,这样的效果是,只执行了一次。然后查看了一通资料,发现这个setTimeOut只是在delay毫秒之后执行代码,嗦嘎。

那如何才能循环执行呢?——>递归登场

好吧,我的递归就是(错误代码)

startReportHeart() {
   var timerTem = setTimeout(function () {
     that.heartReport();
   }, app.globalConfig.heart_delay)
   // 保存定时器name
    that.setData({
      timer: timerTem
   })
   })
   that.startReportHeart()
 },

好像没有毛病啊,自递归调用,嗯,没毛病,但是,,,,情况就是,瞬间出现了堆栈溢出。哈哈哈哈哈哈哈。。。。。。。
分析:

我在startReportHeart函数中开启了一个timer,5秒后开始执行,heartReport获取位置信息,此时直接递归调用自己,再开启一个timer,我的天,这么愚蠢的代码,是谁写的,没错就是我。手动捂脸。

在知道了原因之后,那么如何才能解决呢?我们需要5秒后在一次执行,对就是这个需求,那么自然就是在timer中调用自身啊。笨蛋。

正确代码:

startReportHeart() {
   var timerTem = setTimeout(function () {
     that.heartReport();
     that.startReportHeart()
   }, app.globalConfig.heart_delay)
   // 保存定时器name
   that.setData({
      timer: timerTem
   })
 },

就这样完美。

总结

有的时候,遇到的坑真的很想打自己一巴掌,但是解决坑的过程,并发现自己的愚蠢却是一件非常开心的事呢。这个过程也是十分的funning呢。

小程序开发刚开始一周时间,是的,一周上手,一点一点,现在越来越顺手,虽然写的东西比较low,但是再一次印证了那句话,只有实践才是最好的学习方式。不要找什么从入门到精通,你会发现,这些都会让你从入门到放弃。

,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值

Javascript 相关文章推荐
二行代码解决全部网页木马
Mar 28 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 Javascript
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
在JavaScript中访问字符串的子串
Jul 07 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
vue中动态设置meta标签和title标签的方法
Jul 11 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
layUI实现三级导航菜单效果
Jul 26 #Javascript
layui实现三级联动效果
Jul 26 #Javascript
layui实现三级导航菜单
Jul 26 #Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 #Javascript
详解nvm管理多版本node踩坑
Jul 26 #Javascript
layui自定义ajax左侧三级菜单
Jul 26 #Javascript
layui递归实现动态左侧菜单
Jul 26 #Javascript
You might like
PHP分页显示制作详细讲解
2006/10/09 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
js 程序执行与顺序实现详解
2013/05/13 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
javascript中Object使用详解
2015/01/26 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python中join函数简单代码示例
2018/01/09 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
python中class的定义及使用教程
2019/09/18 Python
Python 复平面绘图实例
2019/11/21 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
python推导式的使用方法实例
2021/02/28 Python
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
大学生社会实践评语
2014/04/25 职场文书
道歉短信大全
2015/05/12 职场文书
天鹅湖观后感
2015/06/09 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
python实现的web监控系统
2021/04/27 Python
Go 在 MongoDB 中常用查询与修改的操作
2021/05/07 Golang
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android
PHP中多字节字符串操作实例详解
2021/08/23 PHP