微信小程序—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 相关文章推荐
extjs fckeditor集成代码
May 10 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
jquery可见性过滤选择器使用示例
Jun 24 Javascript
Iframe 自动适应页面的高度示例代码
Feb 26 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
javascript常用功能汇总
Jul 05 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
微信小程序如何获取用户信息
Jan 26 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
用PHP写的MySQL数据库用户认证系统代码
2007/03/22 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
js实现点击烟花特效
2020/10/14 Javascript
python清除指定目录内所有文件中script的方法
2015/06/30 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
基于python历史天气采集的分析
2019/02/14 Python
python面向对象 反射原理解析
2019/08/12 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
Python实现快速排序的方法详解
2019/10/25 Python
Pandas之缺失数据的实现
2021/01/06 Python
关于canvas绘制模糊问题的解决方法
2019/09/24 HTML / CSS
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
计算s=f(f(-1.4))的值
2014/05/06 面试题
质检部经理岗位职责
2014/02/19 职场文书
销售员求职个人的自我评价
2014/02/19 职场文书
大一学生个人总结
2015/02/15 职场文书
党员读书活动心得体会
2016/01/14 职场文书
MySQL存储过程及语法详解
2022/08/05 MySQL