一道面试题:
“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的坑的更多相关文章

  1. 你可能不知道的setInterval的坑

    你可能不知道的setInterval的坑 之前印象中一直记得setInterval有一些坑,但是一直不是很清楚那些坑是什么.今天去摸索了下之后,决定来做个记录以免自己忘记,也希望让更多人了解到这个坑. ...

  2. 小程序坑 redirectTo 计时器 setInterval clearInterval

    var time = 20: var timer = setInterval(function () { time = time - 1; that.setData({ CountDown: time ...

  3. js的setInterval和setTimeout的那些浅坑

    setInterval和setTimeout的区别简单提一下 setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式.方法会不停地调用函数,直到 clearInterval() ...

  4. H5嵌入原生开发小结----兼容安卓与ios的填坑之路

    一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...

  5. react-native 踩坑记

    最近在使用react-native的时候遇到了很多坑,这里给大家分享下 一.样式 react-native 虽然支持flex布局,但是所有的样式均是css样式的一个很小的集合,尤其是在安卓机下问题尤为 ...

  6. JavaScript填坑史

    说明:  这是笔者平时积累的一些觉得比较有意思或是比较有难度的JavaScript题目理解和心得,会保持长期更新. 1.setTimeout和setInterval深入理解 在setTimeout和s ...

  7. JavaScript 跳坑指南

    JavaScript 跳坑指南 坑0-String replace string的replace方法我们经常用,替换string中的某些字符,语法像这样子 string.replace(subStr/ ...

  8. 与webview打交道中踩过的那些坑

    随着HTML5被越来越多的用到web APP的开发当中,webview这一个神器便日渐凸显出重要地位.简要的说,webview能够在移动应用中开辟出一个窗口,在里面显示html页面,css以及js代码 ...

  9. 那些年,我们一起被坑的H5音频

    原文地址:http://weibo.com/p/23041874d6cedd0102vkbr   不要被这么文艺的标题吓到,这里不会跟你讲述中学时期泡妞史,也不会有其它什么现实不该有而小说噼里啪啦不能 ...

随机推荐

  1. (1.10)SQL优化——mysql 常见SQL优化

    (1.10)常用SQL优化 insert优化.order by 优化 1.insert 优化 2.order by 优化 [2.1]mysql排序方式: (1)索引扫描排序:通过有序索引扫描直接返回有 ...

  2. Scala泛型详解

    在Scala中你可以使用类型参数来实现类和函数,这样的类和函数可以用于多种类型.比如Array[T] 你可以存放任意指定类型T的数据. 类.特质.函数都可以有类型参数:将类型参数放在名字后面用方括号括 ...

  3. PHP类名获取的几种方式及单例模式实现

    参考:https://www.cnblogs.com/water0729/p/5803217.html <?php class foo { static public function test ...

  4. [LeetCode] 系统刷题5_Dynamic Programming

    Dynamic Programming 实际上是[LeetCode] 系统刷题4_Binary Tree & Divide and Conquer的基础上,加上记忆化的过程.就是说,如果这个题 ...

  5. Eclipse + Maven 安装配置

    1. 下载 http://maven.apache.org/download.cgi 2. 解压 3. 配置环境变量 MAVEN_HOME = D:\Software\apache-maven-3.5 ...

  6. jQuery发布1.9正式版,最后支持IE 6/7/8

    jQuery 于 2013/1/15 正式发布了 1.9 版本,这个版本最值得关注的,不是又增加了什么新功能,而是它去掉了哪些东西!jQuery 1.9 删除和改动了不少过时的 API,升级后可能会导 ...

  7. BindIPEndPointDelegate

    开发人员经常会碰到老板或上头安排的项目或需求,是自己完全陌生的领域,这个时候就会非常头痛,搜索引擎能解决大部分这些方面的问题,而有时因为自身问题或干脆找不到解决方案而非常抓狂......虽然干开发有1 ...

  8. [xdoj]1299&1300朱神的烦恼 朱神的序列

    http://acm.xidian.edu.cn/problem.php?id=1299 1.第一道题简单的很,数据范围最多只有1e4,对于数组中的每一个元素进行两个for循环,i=0;i<n; ...

  9. centos5 升级到centos6

    From http://www.linuxquestions.org/questions/linux-newbie-8/yum-update-error-4175476250/ 对开发组的一个服务器执 ...

  10. React对比Vue(05 生命周期的对比)

    先来vue的吧,先上图,生命周期就好比一个人重出生到青少年再到青年再到中年在到老年到死亡的一个过程,不同的过程做不同的事情. 好了,上代码 beforeCreate :数据还没有挂载呢,只是一个空壳 ...