js中的代码,对应有同步任务和异步任务,同步任务会在js主线程中排队执行,异步任务会被挂起(即暂不执行),并在一个队列(task queue)中添加一个事件。
当这些同步任务执行完了(主线程空闲),js主线程会到队列中读取事件,然后在主线程中执行对应的异步任务。这个过程是一致不断的循环进行,所以又称事件循环机制(Event Loop)。
注意:队列中添加的是事件,每个事件对应一个任务,所以称这个队列为任务队列(task queue)。
那么,怎么设置异步任务呢?或者说哪些操作是异步的呢?
1. 鼠标点击等事件的回调函数。
也就是说当用户点击时,点击事件会被添加到任务队列中去,主线程循环到这个事件时,对应的回调函数(异步任务)就会被执行(在主线程中);注意,事件注册并不是一个异步任务,即ele.οnclick=function(){}只是注册了一个事件,只有当用户点击了(进入task queue),主线程循环到此事件,对应的function才会被执行。
2. setTimeout & setInterval
两种方法的作用是推迟异步任务(回调函数)进入队列的时间,并不能保证异步任务在指定的时间后执行。
比如:在js代码执行到setTimeout(function(){},5000)时,意思是“我(function)将在5s之后进入任务队列”。5s后,如果主线程空闲,那么function会立即执行,从外面来看,实现了“function被延迟5s执行”;如果主线程还在忙(可能是同步代码尚未执行完或还在执行前面的异步任务),那么function会等到主线程执行完了再执行,此时时间已经大于5s。 看下面的例子:
var start=new Date();
setTimeout(function () {
console.log(new Date()-start);
},500);
while(new Date()-start<=1000){}
结果会输出一个大于1000的数字。
即便将指定时间置为0,setTimeout(function(){},0),function也不会立即执行,只是将任务“立即”(加引号是因为浏览器默认会有几毫秒~十几毫秒的