微信小程序setinterval_简单谈谈setTimeout与setInterval

感谢踩过的坑

sf社区的第一篇文章。

最近在做一个拍卖的微信小程序,用到了定时器setTimout和setInterval,简单谈谈这两个api。

setTimeout

最常见的用法就是第二种(第三种mdn文档不推荐),如:

var timeoutId = setTimeout(function() {

console.log('hello world!')

},1000)

定时器是先等待1000ms再执行function的语句,而不是一开始就执行然后再等待。如果执行的语句需要用到this引用,需要在回调函数function上绑定this:function() {...}.bind(this),把this传给回调函数,同作为该回调函数的this,使回调函数内外this的指向保持一致。或者用es6的箭头函数() => {},也能起到同样的作用。bind的用法详见Function.prototype.bind()

用完定时器之后,要记得清除:clearTimeout(timeoutId) 这里的timeoutId是setTimeout返回的一个正整数编号,是定时器的唯一标识符。

setInterval

在我看来基本上可以当成setTimeout的升级版,就像setTimeout循环调用自身,用法也跟setTimeout一样,用完是也要记得用clearInterval清掉定时器。底层原理或许会有些不同,这里就不深究。

下面是我在微信小程序倒计时组件:

// components/countdown.js

/**

* 倒计时组件

*/

Component({

/**

* 组件的属性列表

*/

properties: {

durationInit: {

type: Number,

value: 0,

observer: function(newVal) { //监控duration初始值变动(看有没有外部传入新的时间)

this.initDuration(newVal)

}

}

},

/**

* 组件的初始数据

*/

data: {

duration: 0, //剩余时间,单位秒

timeDisplay: '' //展示时间

},

intervalId: null, //计时器Id,不需要渲染,放外面,免得影响性能

/**

* 组件销毁了要清除计时

*/

detached() {

this.stopInterval(this.intervalId)

},

/**

* 组件的方法列表

*/

methods: {

// 设置时间

setTime: function(duration) {

if (duration <= 0) {

this.setData({

timeDisplay: `活动结束啦`

})

//this.data.timeDisplay = `活动结束啦,戳这里看看好东西~`

return false

}

var s = this.formatTime(duration % 60)

var m = this.formatTime(Math.floor(duration / 60) % 60)

var h = this.formatTime(Math.floor(duration / 3600) % 24)

var d = this.formatTime(Math.floor(duration / 3600 / 24))

var time = `${d}:${h}:${m}:${s}`

//写入

this.setData({

timeDisplay: time

})

return true

},

//倒计时

countDown: function(duration) {

//有没有倒计时的必要.第一次展示时间(这个很重要)

var canCountDown = this.setTime(duration)

if (canCountDown === true) {

var intervalId = setInterval(

function() {

//清除计时器

if (this.data.duration <= 0) {

this.stopInterval(intervalId)

}

this.setData({

duration: this.data.duration - 1

})

this.setTime(this.data.duration)

}.bind(this),

1000

)

this.intervalId = intervalId

}

},

//初始化剩余时间

initDuration: function(newVal) {

if (this.intervalId) {

//若有计时器,清除

this.stopInterval(this.intervalId)

}

this.setData({

duration: this.data.durationInit

})

this.countDown(newVal)

},

//清除计时器

stopInterval: function(intervalId) {

if (intervalId != null) {

clearInterval(intervalId)

this.intervalId = null

}

},

//格式化时间

formatTime(time) {

return time < 10 ? `0${time}` : `${time}`

}

}

})

最后想吐槽一下W3School,随着学习的深入,发现W3School的坑真多,强烈建议不要看W3School学前端,要看MDN文档。可能很多人的前端启蒙就是W3School,我也是。名字跟W3C很像,还以为是非常专业的网站,然而后来发现跟W3C并没有什么关系。W3School在baidu搜索排名非常高,被坑了,baidu也是同谋。现在早已拥抱google,清爽!

下面就拿setInterval的说明做例子,对比一下MDN和W3School,就知道后者有多坑了。

通过上面3张图片,可以看出

1. W3School含糊其辞,解释不清楚,不详细。用的时候容易出问题

W3School:周期性执行...请告诉我如果先执行了回调函数,再等待1秒,再执行回调函数,这算不算得上周期性??

MDN:详细指出函数的每次调用会在该延迟之后发生

2. 不推荐的用法没有指出,文档更新慢,权威性极低

W3School:连举的例子都是不推荐的用法,用code代码串。。。

MDN:详细指出使用code不推荐,不仅如此,还发散性指出原因和eval()一样,真的很贴心很友好了

以上图片均来源于MDN和W3School

在最后,感谢踩过的坑,让我成长!初来乍到,多多关照,希望能坚持写技术博文。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/533808.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python 注释一段话_Python快速入门(一)

引言Python作为一个&#xff0c;目前最火的编程语言之一&#xff0c;已经渗透到了各行各业。它易学好懂&#xff0c;拥有着丰富的库&#xff0c;功能齐全。人生苦短&#xff0c;就用Python。这个快速入门系列分为六篇&#xff0c;包含了Python大部分基础知识&#xff0c;每篇阅…

linux ibus获取窗体位置,Ubuntu 12.04 显示ibus 的输入框

在虚拟机中安装了Ubuntu 12.04&#xff0c;系统是英文版本的&#xff0c;我能接受&#xff0c;但是苦于没有中文输入法。起先&#xff0c;我是安装SCIM&#xff0c;结果我折腾了半天&#xff0c;发现其只能在lib-office下使用。firefox,文字编辑器中都不能调出SCIM。无奈将其卸…

transporter上传卡正在交付_【iOS】Xcode11使用Transporter将APP上传到App Store,卡在正在验证APP...

问题&#xff1a;在使用Transporter时&#xff0c;会卡主&#xff0c;一直显示正在验证APP在这里插入图片描述解决方案一&#xff1a;利用V-P-N在这里插入图片描述使用安全上网(V-P-N)&#xff0c;双击打开iTMSTransporter&#xff0c;等待几分钟lichuangMacBook-Pro-3 ~ % /Ap…

python练手经典100例微盘_20个Python练手经典案例,能全做对的人确实很少!

100个Python练手小程序&#xff0c;学习python的很好的资料&#xff0c;覆盖了python中的每一部分&#xff0c;可以边学习边练习&#xff0c;更容易掌握python。 如果你感觉学不会&#xff1f;莫慌&#xff0c;小编推荐大家加入群&#xff0c; 前面548中间377后面875&#xff0…

小红帽linux各功能中英,英文短剧《小红帽》剧本台词完整版---中英对照文本版...

大灰狼和小红帽的故事红帽第一场&#xff1a;小红帽家 妈妈&#xff1a; (妈妈拿着一个篮子&#xff0c;把桌子上的水果放在篮子里) 小红帽唱着歌&#xff0c;欢快地跑进来)Hi,mummy, what are you doing? 嘿&#xff0c;妈妈 你在什么&#xff1f; 妈妈&#xff1a; (一边把水…

uipath循环datatable_UiPath之DataTable转换为List和Array

今天给大家分享一下&#xff0c;如何将DataTable转为List和Array&#xff0c;为此小U也花了不少时间研究&#xff0c;最后发现没有那么复杂。先来说说List和Array的区别&#xff1a;List&#xff1a;就像一个链条&#xff0c;存储数据的空间可以不连续。Array&#xff1a;就像一…

python批量下载文件教程_Python抓包菜鸟教程:批量下载图片的方法,电脑和手机都能用...

笔者看上了一组图集&#xff0c;然后准备一张一张下载时&#xff0c;瞄了一眼&#xff0c;这组图集还有100&#xff0c;好吧&#xff0c;我酸了。 笔者就是试试工具&#xff0c;你们别像我这样用&#xff0c;这么好的工具&#xff0c;做自媒体&#xff0c;那绝对了那如何批量下…

esxi挂载Linux的nfs盘,ESXi安装centos7挂载群晖NFS

前段时间折腾了ESXi&#xff0c;然后无尽的折腾接踵而来&#xff0c;今天要说的是如何安装centos7并挂载群晖虚拟机的NFS共享文件夹直接步入正题&#xff01;先是下载centos7镜像&#xff0c;因为我是用来当服务器的&#xff0c;所以只需要minimal版即可【centos下载链接】自己…

python使用的编辑器_我用过的最好的python编辑器PyScripter

用了IDLE, PythonWin等几个python编辑器&#xff0c;在代码补全、参数提示等功能上都非常不满意。 终于找到PyScripter并且试用了一下&#xff0c;代码补全、参数提示等功能非常强大。这个功能其实非常重要&#xff0c;可以大大提高开发效率&#xff0c;减少出错。很满意.PyScr…

linux is not unix由来,一些奇怪的 unix 指令名字的由来(转)

一些奇怪的 unix 指令名字的由来(转)[more]一些奇怪的 unix 指令名字的由来awk "Aho Weinberger and Kernighan"这个语言以作者 Al Aho, Peter Weinberger 和 Brian Kernighan 的姓来命名。grep "Global Regular Expression Print"grep 来自 ed 的列印所…

python discuz_pythonDiscuz发帖器的实现

网络技术需要大家共同分享&#xff0c;不能闭门造车&#xff0c;下面是bj-dnsCom提示&#xff1a;首先要清楚discuz论坛发帖的流程&#xff0c;简单地说就是以下流程:进入登录页 ->登录 -> 进入版面 ->发帖 首先要清楚discuz论坛发帖的流程&#xff0c;简单地说就是以…

基于linux的业设计课题,基于linux下智能手机的设计与制作 毕业设计.doc

本科生毕业论文(设计)题 目&#xff1a; 基于linux下智能手机的设计与制作目录1. 绪论11.1 嵌入式系统的应用前景11.2linux操作系统21.2.1Linux介绍22.硬件、软件介绍32.1S3c2440知识32.1.1S3c2440系统结构介绍32.1.2arm实验仪介绍72.2 GPRS无线模组92.2.1 GPRS概述及工作原理9…

excel文件导入hive乱码_将excel中的数据导入hive

步骤一&#xff1a;将excel另存为txt文档(文本文件(制表符分割))假设名字为CompanyCode.txt步骤二&#xff0c;将该txt文件导入Linux指定目录中步骤三&#xff0c;转换编码格式&#xff0c;在指定目录下执行如下命令&#xff1a;piconv -f gb2312 -t UTF-8 CompanyCode.txt &g…

传统的6d位姿估计fangfa1_李飞飞团队最新论文:基于anchor关键点的类别级物体6D位姿跟踪...

点击上方“3D视觉工坊”&#xff0c;选择“星标”干货第一时间送达简介作者提出了一种基于RGB-D的深度学习方法6PACK&#xff0c;能够实时的跟踪已知类别物体。通过学习用少量的3D关键点来简洁地表示一个物体&#xff0c;基于这些关键点&#xff0c;通过关键点匹配来估计物体在…

c语言的程序结构语序,第3章 C语序结构.doc

第3章 C语序结构第三章 基本语句本章要求:1.表达式语句,空语句,复合语句2.数据的输入与输出,输入,输出函数的调用&#xff23;语句概述&#xff23;程序的执行部分是由语句组成的。 程序的功能也是由执行语句实现的。3.1 赋值语句赋值语句: 是由赋值表达式再加上分号构成的表达…

安卓system镜像分区_玩机爱好者想要的PT分区到底是什么?可以使现有的安卓系统更快!...

小编第一次看见PT分区这个词。就比较好奇他到底是什么神仙技术。今天&#xff0c;小编给大家科普一下&#xff0c;可能小编理解的也不是特别准确&#xff0c;请各位谅解&#xff01;&#xff01; 欢迎关注小编。各位玩机爱好者总是沉浸在各种ROM包、第三发Rec&#xff0c;以及各…

计算器软件C语言课程设计实验报告,c简单计算器实验报告_相关文章专题_写写帮文库...

时间&#xff1a;2019-05-15 12:55:15 作者&#xff1a;admin计算器实验报告班级&#xff1a; 07计本(1)班姓名&#xff1a; 王林学号&#xff1a; 20706031047指导老师&#xff1a; 韩静一、 需求分析(1)制作一个计算器界面工程&#xff0c;有数字运算符等键&#xff0c;输入表…

python求和1到100_python等差数列求和公式前 100 项的和实例

python等差数列求和公式前 100 项的和实例 最近跑去学了下python,一个很简单的题&#xff0c;结果发现数学公示忘了&#xff0c;在不用for循环的情况下居然有些懵&#xff0c;记录为下.. 题&#xff1a;等差数列可以定义为每一项与它的前一项的差等于一个常数&#xff0c;可以用…

android mqtt详解_Android mqtt入门 Android studio(转)

Android mqtt入门 Android studio2018年04月09日 14:02:30 hbw020 阅读数&#xff1a;1564分享 mqtt简单使用介绍&#xff1a;1、as创建工程2、官网下载mqtt支持包放入lib文件&#xff0c;点击打开链接&#xff0c;https://repo.eclipse.org/content/repositories/paho-release…

jupyter kernel_新乡联通案例分享:Jupyter开发环境配置的常用技巧

Jupyter开发环境配置的常用技巧新乡联通网管中心 邢少华Python开发环境中&#xff0c;大部分人使用的是Jupyter&#xff0c;在Jupyter中有几个令人困扰的问题&#xff1a;1. Jupyter的默认打开目录如何修改2. Jupyter默认使用的浏览器如何修改3. 好用的Jupyter插件如何安装4.…