关于setInterval的坑
一道面试题:
“setInterval和setTimeout有什么区别”
“如果setInterval计时器的回调函数执行完需要5秒,而计时器时间间隔为3秒,那会发生什么?”
验证代码
让程序滞留固定时间的方法如下:
function sleep(time) {
let startTime = window.performance.now();
while (window.performance.now() - startTime < time) {}
}
运行代码如下:
let count = 1;
let getTime = window.performance;
let startTime = getTime.now(); setInterval(function () {
console.log(`第${count}次开始 ${getTime.now() - startTime}`); // 显示开始时间
sleep(500); // 程序滞留500ms
console.log(`第${count}次结束 ${getTime.now() - startTime}`); // 显示结束时间
count += 1;
}, 300); // 300ms间隔
为方便测试setTimeout,改一下
function test(){
console.log(`第${count}次开始 ${getTime.now() - startTime}`); // 显示开始时间
sleep(500); // 程序滞留500ms
console.log(`第${count}次结束 ${getTime.now() - startTime}`); // 显示结束时间
count += 1;
count>10 && clearInterval(t);
}
let count = 1;
let getTime = window.performance;
let startTime = getTime.now();
var t = setInterval(test , 300); // 300ms间隔

其他浏览器也一样,但是在NODE中

改为setTimeout,结果也一样
function sleep(time) {
let startTime = window.performance.now();
while (window.performance.now() - startTime < time) {}
}
function test(){
console.log(`第${count}次开始 ${getTime.now() - startTime} ID:${t}`); // 显示开始时间
sleep(500); // 程序滞留500ms
console.log(`第${count}次结束 ${getTime.now() - startTime}`); // 显示结束时间
count += 1;
count<10 && setTimeout(test,300);
}
let count = 1;
let getTime = window.performance;
let startTime = getTime.now();
var t;
test(); // 300ms间隔
1. 标准中,setInterval()如果前一次代码没有执行完,则会跳过此次代码的执行。
2. 浏览器中,setInterval()如果前一次代码没有执行完,不会跳过此次代码,而是将其插在队列中,等待前一次代码执行完后立即执行。
3. Node中,setInterval()会严格按照间隔时间执行。
链接:https://www.jianshu.com/p/0ad05e325f9b
关于setInterval的坑的更多相关文章
- 你可能不知道的setInterval的坑
你可能不知道的setInterval的坑 之前印象中一直记得setInterval有一些坑,但是一直不是很清楚那些坑是什么.今天去摸索了下之后,决定来做个记录以免自己忘记,也希望让更多人了解到这个坑. ...
- 小程序坑 redirectTo 计时器 setInterval clearInterval
var time = 20: var timer = setInterval(function () { time = time - 1; that.setData({ CountDown: time ...
- js的setInterval和setTimeout的那些浅坑
setInterval和setTimeout的区别简单提一下 setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式.方法会不停地调用函数,直到 clearInterval() ...
- H5嵌入原生开发小结----兼容安卓与ios的填坑之路
一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...
- react-native 踩坑记
最近在使用react-native的时候遇到了很多坑,这里给大家分享下 一.样式 react-native 虽然支持flex布局,但是所有的样式均是css样式的一个很小的集合,尤其是在安卓机下问题尤为 ...
- JavaScript填坑史
说明: 这是笔者平时积累的一些觉得比较有意思或是比较有难度的JavaScript题目理解和心得,会保持长期更新. 1.setTimeout和setInterval深入理解 在setTimeout和s ...
- JavaScript 跳坑指南
JavaScript 跳坑指南 坑0-String replace string的replace方法我们经常用,替换string中的某些字符,语法像这样子 string.replace(subStr/ ...
- 与webview打交道中踩过的那些坑
随着HTML5被越来越多的用到web APP的开发当中,webview这一个神器便日渐凸显出重要地位.简要的说,webview能够在移动应用中开辟出一个窗口,在里面显示html页面,css以及js代码 ...
- 那些年,我们一起被坑的H5音频
原文地址:http://weibo.com/p/23041874d6cedd0102vkbr 不要被这么文艺的标题吓到,这里不会跟你讲述中学时期泡妞史,也不会有其它什么现实不该有而小说噼里啪啦不能 ...
随机推荐
- caz,数字证书,公钥
如何有效检查证书有效性? https://www.jianshu.com/p/f4a37da10c53 自签名的https证书是不安全的 https://www.cnblogs.com/liyy201 ...
- windows版本下ELK配置
windows版本的es和kibana相对配置起来很简单,网上已经有很多例子都是正确的,只需按照步骤安装一下即可. 主要logstash,网上说的方案,大都不能配置成功,或者总有一些错误,下面把我自己 ...
- MACD:黄白线、红绿柱与0轴关系
一.MACD的基本问题: (1)参数:统一用12,26,9 (2)MACD 位正.位不正原则 以下四种情况是黄白线.红绿柱与0轴关系的完全分类,行情出不了这四种情况, 即便黄白线在0轴单边反复缠绕 ...
- 根据数据库结构生成RzCheckTree
现在大多数的方法是采用递归,但这种操作会频繁的去select数据库,降低了执行效率,稍微改动一些,效果会好不少,这里介绍一种方法,即一次性select出所有数据,然后按照ParentID排序,逐条添加 ...
- Redis入门到高可用(三)——通用命令
通用命令 参考 http://redisdoc.com/index.html 1. keys #查看所有key 时间复杂度:O(N), N 为数据库中 key 的数量. 127.0.0.1:637 ...
- [py]py里的isinstance判断实例来源(含父类)
Isinstance() 函数来判断一个对象是否是一个已知的类型,类似 type(). isinstance() 与 type() 区别: type() 不会认为子类是一种父类类型,不考虑继承关系. ...
- 【Redis】持久化
Redis提供了为持久化提供了两种方法:第一种是快照:他可以将存在某一时刻的所有数据都写入硬盘里面.第二种是只追加文件(AOF):它会在执行命令时,将被执行的写命令复制到硬盘里面. Redis支持持久 ...
- Let Encrypt延期(转自虞大胆的叽叽喳喳)
前几天发现我的 letsencrypt 通配符证书快过期了,想为这两张证书续期(renew). 首先运行命令查看我的所有证书: $ certbot-auto certificates 其中证书名 si ...
- git 查看某个文件的修改记录
有几种方式, (1)如果是在linux环境下,比如centos,ubuntu之类的,建议安装tig命令 炒鸡好用,tig后面可以跟文件或者文件夹,比如: (1.1)tig dir_name (1.2 ...
- (转载)常用正则表达式大全!(例如:匹配中文、匹配html)
正则匹配java注意点: 如果加 ^[\n]* 表示替换遇到 \n 的前后内容,如果加[\n]表示替换\n本处内容 原文地址:http://blog.csdn.net/dl020840504/arti ...