本文通过实例给大家详细分析了js中事件循环机制的原理和用法，以下是全部内容：
我要评论
var start = new date()
settimeout(function () {
var end = new date
console.log('time elapsed:', end - start, 'ms')
}, 500)
while (new date() - start < 1000) {
}
有其他语言能完成预期的功能吗？java, 在java.util.timer中，对于定时任务的解决方案是通过多线程手段实现的，任务对象存储在任务队列，由专门的调度线程，在新的子线程中完成任务的执行
js是单线程的
javascript的主要用途是与用户互动，以及操作dom。这决定了它只能是单线程，否则会带来很复杂的同步问题。
为了利用多核cpu的计算能力，html5提出web worker标准，允许javascript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作dom。所以，这个新标准并没有改变javascript单线程的本质。
函数调用栈和任务队列
调用栈
js执行时会形成调用栈,调用一个函数时,返回地址、参数、本地变量都会被推入栈中,如果当前正在运行的函数中调用另外一个函数,则该函数相关内容也会被推入栈顶.该函数执行完毕,则会被弹出调用栈.变量也随之弹出,由于复杂类型值存放于堆中,因此弹出的只是指针,他们的值依然在堆中,由gc决定回收.
事件循环（event loop） & 任务队列（task queue）
javascript 主线程拥有一个执行栈以及一个任务队列
遇到异步操作（例如：settimeout, ajax）时，异步操作会由浏览器(os)执行，浏览器会在这些任务完成后，将事先定义的回调函数推入主线程的任务队列(task queue)中,当主线程的执行栈清空之后会读取task queue中的回调函数,当task queue被读取完毕之后,主线程接着执行,从而进入一个无限的循环,这就是事件循环.
主线程执行栈 & 任务队列 循环执行，构成事件循环
结论
settimeout()只是将事件插入了"任务队列"，必须等到当前代码（执行栈）执行完，主线程才会去执行它指定的回调函数。要是当前代码耗时很长，有可能要等很久，所以并没有办法保证，回调函数一定会在settimeout()指定的时间执行。
另一个例子
(function test() {
settimeout(function() {console.log(4)}, 0);
new promise(function executor(resolve) {
console.log(1);
for( var i=0 ; i<10000 ; i++ ) {
i == 9999 && resolve();
}
console.log(2);
}).then(function() {
console.log(5);
});
console.log(3);
})()
macrotask & microtask
macrotask 和 microtask 是异步任务的两种分类。在挂起任务时，js 引擎会将所有任务按照类别分到这两个队列中，首先在 macrotask 的队列（这个队列也被叫做 task queue）中取出第一个任务，执行完毕后取出 microtask 队列中的所有任务顺序执行；之后再取 macrotask 任务，周而复始，直至两个队列的任务都取完。
macro-task: script（整体代码）, settimeout, setinterval, setimmediate, i/o, ui rendering
micro-task: process.nexttick, promises（这里指浏览器实现的原生 promise）, object.observe, mutationobserver
结论
全部代码(script) macrotask -> microtask queue (含有promise.then) -> macrotask(settimeout) -> 下一个microtask
node.js的事件循环
process.nexttick & setimmediate
process.nexttick指定的任务总是发生在所有异步任务之前
setimmediate指定的任务总是在下一次event loop时执行
process.nexttick(function a() {
console.log(1);
process.nexttick(function b(){console.log(2);});
});
settimeout(function timeout() {
console.log('timeout fired');
}, 0)
new promise(function(resolve) {
console.log('glob1_promise');
resolve();
}).then(function() {
console.log('glob1_then')
})
process.nexttick(function() {
console.log('glob1_nexttick');
})
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
网友评论