setTimeout 实现原理, 机制
JS 执行机制说起
浏览器（或者说 JS 引擎）执行 JS 的机制是基于事件循环。
由于 JS 是单线程，所以同一时间只能执行一个任务，其他任务就得排队，后续任务必须等到前一个任务结束才能开始执行。
为了避免因为某些长时间任务造成的无意义等待，JS 引入了异步的概念，用另一个线程来管理异步任务。
同步任务直接在主线程队列中顺序执行，而异步任务会进入另一个任务队列，不会阻塞主线程;
等到主线程队列空了（执行完了）的时候，就会去异步队列查询是否有可执行的异步任务了（异步任务通常进入异步队列之后还要等一些条件才能执行，如 ajax 请求、文件读写），如果某个异步任务可以执行了便加入主线程队列，以此循环;
定时器也是一种异步任务，通常浏览器都有一个独立的定时器模块，定时器的延迟时间就由定时器模块来管理，当某个定时器到了可执行状态，就会被加入主线程队列。
setTimeout 注册的函数 fn 会交给浏览器的定时器模块来管理，延迟时间到了就将 fn 加入主进程执行队列，如果队列前面还有没有执行完的代码，则又需要花一点时间等待才能执行到 fn，所以实际的延迟时间会比设置的长;
如在 fn 之前正好有一个超级大循环，那延迟时间就不是一丁点了。
(function testSetTimeout() {
const label = 'setTimeout';
console.time(label);
setTimeout(() => {
console.timeEnd(label);
}, 0);
for(let i = 0; i < 1000; i++) {
console.log(i);
}
})();
// setTimeout: 133.2880859375ms
setInterval 的实现机制跟 setTimeout 类似，只不过 setInterval 是重复执行的。
对于 setInterval(fn, 100) 容易产生一个误区：
并不是上一次 fn 执行完了之后再过 100ms 才开始执行下一次 fn。 事实上，setInterval 并不管上一次 fn 的执行结果，而是每隔 100ms 就将 fn 放入主线程队列;
而两次 fn 之间具体间隔多久就不一定了，跟 setTimeout 实际延迟时间类似，和 JS 执行情况有关。
(function testSetInterval() {
let i = 0;
const start = Date.now();
const timer = setInterval(() => {
i += 1;
i === 5 && clearInterval(timer);
console.log(`第${i}次开始`, Date.now() - start);
for(let i = 0; i < 10000; i++) {}
console.log(`第${i}次结束`, Date.now() - start);
}, 100);
})();
- Stack 栈
- Queue 队列
- Heap 堆
http://www.alloyteam.com/2016/05/javascript-timer/
requestAnimationFrame
window.requestAnimationFrame(callback);
https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
// animation
var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');
function step(timestamp) {
if (!start) start = timestamp;
var progress = timestamp - start;
element.style.transform = 'translateX(' + Math.min(progress / 10, 200) + 'px)';
if (progress < 2000) {
window.requestAnimationFrame(step);
}
}
window.requestAnimationFrame(step);
https://caniuse.com/#feat=requestanimationframe
https://css-tricks.com/using-requestanimationframe/
function repeatOften() {
// Do whatever
requestAnimationFrame(repeatOften);
}
requestAnimationFrame(repeatOften);
requestAnimationFrame demos
https://codepen.io/xgqfrms/pen/ZEzeaEL
https://codepen.io/xgqfrms/pen/zYOZPYd
(function testRequestAnimationFrame() {
window.count = window.count || 0;
window.count++;
if(count < 100) {
const label = 'requestAnimationFrame';
console.time(label);
requestAnimationFrame(() => {
console.timeEnd(label);
testRequestAnimationFrame()
});
}
})();
setImmediate (IE / Edge)
do not use it!
https://developer.mozilla.org/en-US/docs/Web/API/Window/setImmediate
next.tick()
https://stackoverflow.com/questions/15349733/setimmediate-vs-nexttick
-
如果要将函数排在事件队列中已有的任何I / O事件回调之后，请使用setImmediate;
-
使用process.nextTick有效地将函数排在事件队列头部，以便在当前函数完成后立即执行;
https://www.haorooms.com/post/js_setTimeout
setTimeout和setinterval的最主要区别是：
-
setTimeou t只运行一次，也就是说设定的时间到后就触发运行指定代码，运行完后即结束;
如果运行的代码中再次运行同样的setTimeout命令，则可循环运行。（即 要循环运行，需函数自身再次调用 setTimeout()） -
setinterval是循环运行的，即每到设定时间间隔就触发指定代码; 这是真正的定时器。
setinterval使用简单，而setTimeout则比较灵活，可以随时退出循环，而且可以设置为按不固定的时间间隔来运行，比如第一次1秒，第二次2秒，第三次3秒。
事件循环模型
在单线程的 Javascript 引擎中，setTimeout() 是如何运行的呢，这里就要提到浏览器内核中的事件循环模型了;
简单的讲，在 Javascript 执行引擎之外，有一个任务队列，当在代码中调用 setTimeout() 方法时，注册的延时方法会交由浏览器内核其他模块（以 webkit 为例，是 webcore 模块）处理，当延时方法到达触发条件，即到达设置的延时时间时，这一延时方法被添加至任务队列里;
这一过程由浏览器内核其他模块处理，与执行引擎主线程独立，执行引擎在主线程方法执行完毕，到达空闲状态时，会从任务队列中顺序获取任务来执行;
这一过程是一个不断循环的过程，称为事件循环模型。
Javascript 执行引擎的主线程运行的时候，产生堆（heap）和栈（stack）;
程序中代码依次进入栈中等待执行，当调用 setTimeout() 方法时，即图中右侧 WebAPIs 方法时，浏览器内核相应模块开始延时方法的处理，
当延时方法到达触发条件时，方法被添加到用于回调的任务队列，只要执行引擎栈中的代码执行完毕，主线程就会去读取任务队列，依次执行那些满足触发条件的回调函数。
https://www.ruanyifeng.com/blog/2014/10/event-loop.html
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！