嘭,setTimeout炸了指南攻略_setTimeout入门基础

嘭,setTimeout炸了指南攻略

今天要说的很简单,没有 setTimeout 的基本用法,也没有什么特殊用法。就是想记录一下 setTimeout 的一个特殊情况,分享给可能也不知道的你们。

嘭,setTimeout炸了指南攻略_setTimeout入门基础

setTimeout 的基本写法大家都不陌生,如下:

setTimeout(() => {
   // 说,你倒计时想干什么
} , millisecond )

其中第二个参数是需要延时执行的毫秒数,大家应该都知道这个时间是不准确的,可以理解为最短延时。至于为什么是不准确,事件循环了解一下。

但是这个最短延时也会骗人,因为它可能会爆炸:joy:。

今天跟测一个项目,前端需要通过延时的方式去显示某课程是否开始,未开始展示倒计时界面,倒计时至开始时去掉倒计时界面,拉取主体内容。

但是测试小姐姐反馈说她的课程没有开始,没有显示倒计时,直接就显示主内容。并且没有复现步骤,只此一例。

我表示很诧异,但是也没办法。于是使出十八般武艺,开始在测试环境打断点调试,分析代码逻辑。好半天之后,纳尼,逻辑肯定是对的,我相信我的判断。

然后我突然开始怀疑 setTimeout 的倒计时时间问题。于是开始查,最后查到了原因,真的是这货的锅,它因为延时时间过长,炸了。

这就是今天的重点: setTimeout的延时毫秒数是有限制的 。 millisec参数是Int32类型的,最大值为 2^31 – 1,即 2147483647。一旦超过这个限制,millisec参数将被视为0,代码会被立马执行 。

setInterval也一样,毫秒数过大会被当做0,立即执行。

至于 解决方案 也比较简单,有以下三种:

  1. 可以对setTimeout进行二次封装,对传入的延时毫秒数做个判断,如果超出限制,给出警告,并使用最大允许延时毫秒进行执行、或者给出警告后不执行。相信我,没有人会等得了这么长时间的。

  2. 可以用setInterval来替换setTimeout, 每一秒延时毫秒数减1,为0时执行动作。

  3. 从产品层面解决这个问题,如果等待时间过长,可以用其他的方式来提醒。则不需要倒计时了。

看完之后,以后如果你也遇到 setTimeout 失灵的情况,记得想起这茬。

关于奇舞周刊

《奇舞周刊》是360公司专业前端团队「 奇舞团 」运营的前端技术社区。关注公众号后,直接发送链接到后台即可给我们投稿。

原文 https://mp.weixin.qq.com/s/LXjVzdnZxGQzX3dVWlM79g

海计划公众号
(0)
上一篇 2020/03/20 04:05
下一篇 2020/03/20 04:05

您可能感兴趣的内容

  • SteamRecorder入门攻略_基于浏览器屏幕录像工具

    SteamRecorder入门攻略 官方网址:https://www.hlsloader.com/ 简介描述:基于浏览器屏幕录像工具 「Steam Recorder」是一款支持屏幕…

    2020/03/10
  • CSS3 2D转换入门百科_css小白知识

    转换是使元素改变形状、尺寸和位置的一种效果。通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸,可以大致分为2D转换和3D转换。下面介绍的是2D转换的相关知识点。首先,CSS3中2D转换的形式是这样的:选择器{
    transform:转换函数(参数,参数);
    }而2D转换的函数一共分为五大类:translate() 定义位移的函数;其中后

    2020/04/03
  • 数组去重基础指南原生js对普通数组去重算法的7种方法总结_Array小白常识

    第一种算法:算法思想:1、构建一个新数组,新数组包含一个元素,元素值为目标数组的一个值;2、从目标数组的第二个元素开始遍历,依次取出每一个元素;3、将取出的元素与新数组里面的所有元素进行比较,如果没有出现,则将该元素添加到新数组中,如果出现,则处理下一个目标数组的元素;4、目标数组的所有元素均已处理完。Array.prototype.deleteRepeat

    2020/04/05
  • 解决游览器安装Vue.js devtools插件无效的问题入门百科_插件菜鸟教程网

    一: 打开自己写的一个vue.js网页,发现图标并没有亮起来,还是灰色解决方案: 1、我们先看看Vue.js devtools是否生效,打开Bilibili(https://www.bilibili.com/,B站是用的vue),如果发现这个图标变绿了,说明Vue.js devtools是能用的。否则建议卸载重装2、先再拓展程序中找到 Vue.js de

    2020/03/24
  • Nginx常用命令使用帮助_命令小白知识

    前面,跟大家简单地介绍了负载均衡和Nginx的一些基础配置(Nginx负载均衡配置实例),接下来,跟大家介绍一下Nginx的常用命令,便于日常的运维。停止Nginx的方法通过之前的学习,大家知道了如何配置并启动Nginx,但如果想停止Nginx服务,该如何操作呢?下面介绍停止Nginx的四种方法。普通停止使用这种方法,会在进程完成当前工作后再停止nginx

    2020/03/24
  • 纯CSS3仿网易云孤独星球特效入门指南_特效入门基础教程

    今天收听网易云音乐时看到孤独星球的特效,于是就顺手搬到这里了。孤独星球特效本身没有什么难点,但如果要加入音轨控制星球运动频率就有点麻烦了,后面我会专门开一篇文章讲解如何使用js去解析mp3的音轨并制作动画特效,这里呢就稍微简单点了,既然是纯CSS3,星球运动频率就设为固定的好了。前端代码HTML代码:<div c

    2020/03/22
  • MyScript小白入门_公式字符化网站

    MyScript小白入门 官方网址:http://webdemo.myscript.com/ 简介描述:公式字符化网站 有些复杂的公式什么的是不是总是用电脑打不出来?试试这个神器,…

    2020/03/10
  • 如何提升javascript的效率?使用指南_效率使用帮助

    如何提升javascript的效率?使用指南 为了提供新鲜、别致的用户体验,很多网站都会使用 JavaScript来改善设计、验证表单、检查浏览器,以及Ajax请求,cookie操…

    2020/03/19
  • 一早一晚平台入门基础教程_远程工作, 自由职业, 在家工作

    一早一晚平台入门基础教程 官方网址:https://3cwork.com/ 简介描述:远程工作, 自由职业, 在家工作 一早一晚旨在帮助更多人走上「只工作,不上班」的自由工作之路,…

    2020/03/11
  • 我真是受够编程了使用说明_编程小白知识

    成为伟大的程序员,需要付出许多编程之外的努力。我们的大脑是有限的,每天要应付的问题复杂到足以让人精神崩溃。当工作不顺利时,多少都会有些冒名顶替症候群(指成功成年人中,有33%的人感觉自己的成功不是理所应得的)的感觉。这些会让我们感到沮丧和愤怒,从而让代码工作变得更糟。而糟糕的代码会让我们更愤怒,于是就陷入了一个恶性循环。究竟哪儿出问题了?一些人会说这是因为问

    2020/04/03
  • js数组、对象、字符串的遍历小白常识_遍历小白攻略

    数组遍历for –使用变量将数组长度缓存起来,在数组较长时性能优化效果明显for(var i=0,len=arr.length;i<len;i++){console.log("元素:"+arr[i]);
    }
    forEach –ES5语法,对数组的每个元素执行一次提供的函数,不能使用break、returnarr.forEach(function(item

    Web前端 2020/03/30
  • 把你的NodeJS程序给没有NodeJS的人运行使用指南_node小白指南

    标题很绕口,不过确实是一个很常见的需求。众所周知,NodeJS程序开发简便且容易实现跨平台。但是,当你开发了一个NodeJS程序,想要分发给其他人运行的时候,你会发现,你往往需要对方也来安装一个NodeJS环境。理想的方式是,我们可以把我们的程序打包成一个可执行文件,这样,就可以直接在对方的电脑上运行你的程序了;同时,我们将代码打成二进制形式,可以在一定程度

    2020/03/23
  • Js之判断数据类型小白攻略_类型入门百科

    Javascript 中的数据类型判断其实是一个JavaScript非常基础问题,但不论是日常实际编程过程中和还是面试时,这都是一个非常常见的问题。很多人被问到如何判断一个变量数据类型这个问题时,大概都能回答上几种方法,但是一深入的问题各种判断方法的区别、优劣、局限、原理,却一时半会理不清楚了,所以就借这一篇文章,复习一下JavaScript中这个基础但很容

    2020/03/23
  • Vue关键词搜索高亮基础入门_高亮零基础入门

    有时候给页面内容添加一个关键词搜索功能,如果搜索结果能够像浏览器搜索一样高亮显示,那找起来就会很明显体验会好很多。本文就介绍一下关键词搜索高亮的实现方案。实现效果大概如下:可在线预览:http://wintc.top/laboratory/#/search-highlight。一、实现原理实现原理很简单:使用正则匹配出文本内容中的所有关键词,在关键词外包一层

    2020/03/22
  • Vue中错误图片的处理基础知识入门_错误小白知识

    在一个Vue的PC项目中,要求给错误图片不要让它显示丑陋的图片,就要给图片写一个失败后的默认图片,在这里写了两种方法,第一种方法,也就是百度到的最多的代码,就是给一张图片一个默认值。如果页面中有很多地方都存在这个东西,那么在不同的页面中写很对是很麻烦的。就使用到了VUe的指令。这里分为了两种情况一种是直接加载默认图片,等图片加载完成之后再使用加载完成的图片。

    2020/03/23
  • 理解JS中的深拷贝与浅拷贝小白指南_拷贝小白帮助

    浅拷贝浅拷贝是对象的逐位复制。创建一个新对象,该对象具有原始对象中值的精确副本。如果对象的任何字段是对其他对象的引用,则只复制引用地址,即,复制内存地址。大白话讲就是,浅拷贝是对对象地址的复制,并没有开辟新的栈,也就是复制的结果是两个对象指向同一个地址,修改其中一个对象的属性,则另一个对象的属性也会改变。深拷贝深拷贝复制所有字段,并复制字段所指向的动态分配内

    2020/03/24