setTimeout和setInterval的区别

今天去面前端web工程师，人到中年还去找工作，而且是比你年轻好多的小伙子来面试自己，确实是有点说不出的滋味。
所以在此奉劝,认为自己所在企业不理想的人们，赶紧该跳槽就跳槽，不要等企业要垮了再来想办法，人老珠黄啊！废话不多说了。
面试里面提到了setTimeout和setInterval的区别。

• 这个区别简单：setTimeout和setInterval两个函数允许延时一段时间再运行函数，setTimeout只执行一次，而setInterval则会按照时间周期不停的循环调用，直到调用clearsetInterval。

  但面试官又问道：它们的深度区别呢，执行原理是啥，直接就被问懵了，真不知道原理。
  回来“度娘”了下，才发现自己理解的如此肤浅啊

settimeout和setinterval这两个函数, 大家肯定都不陌生, 但可能并不是每个用过这两个方法的同学, 都了解其内部的实质。甚至可能会错误的把两个实现定时调用的函数理解成了类似thread一样的东西, 认为会在一个时间片内, 并发的执行调用的函数, 似乎很好很强大, 但其实并不是如此, 实际的情况是javascript都是以单线程的方式运行于浏览器的javascript引擎中的, settimeout和setinterval的作用只是把你要执行的代码在你设定的一个时间点插入js引擎维护的一个代码队列中, 插入代码队列并不意味着你的代码就会立马执行的,理解这一点很重要. 而且settimeout和setinterval还有点不一样。
代码如下:

function click() {
// code block1…
settimeout(function() {
// process …
}, 200);
// code block2
}

假设我们给一个button的onclick事件绑定了此方法, 当我们按下按钮后, 肯定先执行block1的内容, 然后运行到settimeout的地方, settimeout会告诉浏览器说, “200ms后我会插一段要执行的代码给你的队列中”, 浏览器当然答应了(注意插入代码并不意味着立马执行), settimeout代码运行后, 紧跟其后的block2代码开始执行, 这里就开始说明问题了, 如果block2的代码执行时间超过200ms, 那结果会是如何? 或许按照你之前的理解, 会理所当然的认为200ms一到, 你的process代码会立马执行…事实是, 在block2执行过程中(执行了200ms后)process代码被插入代码队列, 但一直要等click方法执行结束, 才会执行process代码段, 从代码队列上看process代码是在click后面的, 再加上js以单线程方式执行, 所以应该不难理解. 如果是另一种情况, block2代码执行的时间<200ms, settimeout在200ms后将process代码插入到代码队列, 而那时执行线程可能已经处于空闲状态了(idle), 那结果就是200ms后, process代码插入队列就立马执行了, 就让你感觉200ms后, 就执行了。

再看看setinterval，这里可能会存在两个问题:

1.时间间隔或许会跳过
2.时间间隔可能<定时调用的代码的执行时间 复制代码 代码如下: function click() { // code block1… setinterval(function() { // process … }, 200); // code
block2 }

和上面一样我们假设通过一个click, 触发了setinterval以实现每隔一个时间段执行process代码
比如onclick要300ms执行完, block1代码执行完, 在5ms时执行setinterval, 以此为一个时间点,
在205ms时插入process代码, click代码顺利结束, process代码开始执行(相当于图中的timer code),
然而process代码也执行了一个比较长的时间, 超过了接下来一个插入时间点405ms, 这样代码队列后又插入了一份process代码,
process继续执行着, 而且超过了605ms这个插入时间点, 下面问题来,
可能你还会认为代码队列后面又会继续插入一份process代码…真实的情况是,由于代码队列中已经有了一份未执行的process代码,
所以605ms这个插入时间点将会被”无情”的跳过, 因为js引擎只允许有一份未执行的process代码,
说到这里不知道您是不是会豁然开朗呢…

为了这种情况你可以用一种更好的代码形式

在几年前，在oa产品化平台里面写了个提醒框的功能，就是通过setInterval来定时刷新数据库，将当前人需要关心的数据查询展示到提醒框中。当时记得设置时间为5秒刷新一次，但跟踪日志的时候发现前台不停的在刷新，压根没有间隔5秒。实在没法子了后来就改成5分钟咯，当时一直不理解原因，今天才恍然大悟，原来这里的延时调用只是延时插入执行片段，如果回调执行时间过长的话，完全会打乱你的执行间隔啊。