微信小程序—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 相关文章推荐
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
面向对象设计模式的核心法则
Nov 10 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
JS实现图片局部放大或缩小的方法
Aug 20 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
vue中是怎样监听数组变化的
Oct 24 Javascript
JavaScript中10个Reduce常用场景技巧
Jun 21 Javascript
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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
DC宇宙的第一个英雄,堪称动漫史鼻祖,如今成为美国文化的象征
2020/04/09 欧美动漫
PHP 5.0对象模型深度探索之绑定
2006/09/05 PHP
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
JS表的模拟方法
2015/02/05 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
解决vue项目,npm run build后,报路径错的问题
2020/08/13 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
virtualenv实现多个版本Python共存
2017/08/21 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
服装厂厂长职责
2013/12/16 职场文书
洗煤厂厂长岗位职责
2014/01/03 职场文书
一体化教学实施方案
2014/05/10 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
商场促销活动策划方案
2014/08/18 职场文书
史上最牛的辞职信
2015/02/28 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
你会写请假条吗?
2019/06/26 职场文书