微信小程序—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 相关文章推荐
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
javascript中如何处理引号编码"
Aug 15 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
jquery.validate使用详解
Jun 02 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 Javascript
js实现拖拽功能
Mar 01 Javascript
jquery实现图片平滑滚动详解
Mar 22 jQuery
微信小程序--组件(swiper)详细介绍
Jun 13 Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 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 调试工具Debug Tools
2011/04/30 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
vue实现文件上传功能
2018/08/13 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
vue 组件简介
2020/07/31 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
python 排列组合之itertools
2013/03/20 Python
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
Python中使用logging模块打印log日志详解
2015/04/05 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
python3爬虫怎样构建请求header
2018/12/23 Python
解决os.path.isdir() 判断文件夹却返回false的问题
2019/11/29 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
Jar包的作用是什么
2014/03/30 面试题
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
学生干部的自我评价分享
2014/01/18 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书