今天要说的很简单,没有 setTimeout 的基本用法,也没有什么特殊用法。就是想记录一下 setTimeout 的一个特殊情况,分享给可能也不知道的你们。
setTimeout 的基本写法大家都不陌生,如下:
setTimeout(() => {
// 说,你倒计时想干什么
} , millisecond )
其中第二个参数是需要延时执行的毫秒数,大家应该都知道这个时间是不准确的,可以理解为最短延时。至于为什么是不准确,事件循环了解一下。
但是这个最短延时也会骗人,因为它可能会爆炸:joy:。
今天跟测一个项目,前端需要通过延时的方式去显示某课程是否开始,未开始展示倒计时界面,倒计时至开始时去掉倒计时界面,拉取主体内容。
但是测试小姐姐反馈说她的课程没有开始,没有显示倒计时,直接就显示主内容。并且没有复现步骤,只此一例。
我表示很诧异,但是也没办法。于是使出十八般武艺,开始在测试环境打断点调试,分析代码逻辑。好半天之后,纳尼,逻辑肯定是对的,我相信我的判断。
然后我突然开始怀疑 setTimeout 的倒计时时间问题。于是开始查,最后查到了原因,真的是这货的锅,它因为延时时间过长,炸了。
这就是今天的重点: setTimeout的延时毫秒数是有限制的 。 millisec参数是Int32类型的,最大值为 2^31 - 1,即 2147483647。一旦超过这个限制,millisec参数将被视为0,代码会被立马执行 。
setInterval也一样,毫秒数过大会被当做0,立即执行。
至于 解决方案 也比较简单,有以下三种:
可以对setTimeout进行二次封装,对传入的延时毫秒数做个判断,如果超出限制,给出警告,并使用最大允许延时毫秒进行执行、或者给出警告后不执行。相信我,没有人会等得了这么长时间的。
可以用setInterval来替换setTimeout, 每一秒延时毫秒数减1,为0时执行动作。
从产品层面解决这个问题,如果等待时间过长,可以用其他的方式来提醒。则不需要倒计时了。
看完之后,以后如果你也遇到 setTimeout 失灵的情况,记得想起这茬。
《奇舞周刊》是360公司专业前端团队「 奇舞团 」运营的前端技术社区。关注公众号后,直接发送链接到后台即可给我们投稿。
原文 https://mp.weixin.qq.com/s/LXjVzdnZxGQzX3dVWlM79g
惊为天人的发现promise里面的一个例子:原来 setTimeout居然还有第三个参数,调用方法的时候可以作为传参对象。定时器启动时,第三个及以后的参数是作为第一个参数(也就是函数)的参数传进去的。
这段JavaScript代码当你在页面打开2s时间内点击一次按钮,效果是这样的:页面卡住大约5s钟大约5s后弹出 ,click handler点击弹窗确认后,弹出 timer handler
计时器setTimeout是我们经常会用到的,它用于在指定的毫秒数后调用函数或计算表达式。语法:setTimeout(code, millisec, args);注意:如果code为字符串,相当于执行eval()方法来执行code。
在js中setTimeout和setInterval都是用来定时的一个功能,下面这篇文章主要给介绍了JS中setInterval和setTImeout的this指向问题,文中通过示例介绍的很详细,有需要的朋友可以参考借鉴,一起来看看吧。
说起来你可能不相信,setTimeout居然有第三个参数,我以前也没用过这个,是前几天看别人博客发现的,咋一看还以为写错了吧,下面一起看看这个setTimeout第三个参数。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!