js同步 异步 运行机制

时间:2021-12-24 04:29:35

需要知道的那些事:

1.JS是单线程的(为什么?因为能提高效率。作为浏览器脚本语言,js的主要用途是与用户互动,操作DOM。而这也就决定它只能为单线程,否则会带来很复杂的同步问题),也就是说无法同时执行好几段代码,都是从上往下一句一句的执行,前面的代码要先于后面的代码一步被执行。如:

1 var a=12;
2 var b=15;//js在运行的时候,先执行把12赋值给a的操作,再执行把15赋值给b的操作

2.同步VS异步

同步:在同一时间,你只能做一件事情,即使这件事情会花费很长时间,但依旧需要你坚守在那里直到事情处理完毕;

异步:你在做一件事情时,因为这件事情会花费很长时间,在这等待过程中你可以先去处理其他事情,等这件事轮到你的时候再过来处理她即可。js同步 异步 运行机制

差别:在于这条流水线上各个流程的执行顺序不同。

setTimeOut(定时器)VSsetTimeInterval(间隔定时器)

在js当中最基础的异步操作就是setTimeOut()以及setTimeInterval()了。

1.setTimeOut()方法用于在指定的毫秒数后执行某些操作;

 //3秒后弹出“Hello”
var myVar; function myFunction() {
myVar = setTimeout(alertFunc, 3000);
} function alertFunc() {
alert("Hello!");
}

2.API:

 var id = setTimeout(fn,timer);
//fn是执行函数
//timer间隔时间
//返回一个id值,在fn未触发之前,可以通过clearTimeout(id)清除,从而不执行fn
clearTimeout(id);

3.使用clearTimeOut()方法来阻止函数的执行;

4.返回一个 ID(数字),可以将这个ID传递给 clearTimeout() 来取消执行。


1.setInterval描述的是每隔多少时间执行某操作;

2.setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数;

3.API:

        var id = setInterval(fn,timer);
//fn是要执行的函数,
//timer是间隔时间
//返回一个id,用于将来某个时间用clearInterval清除间隔定时器
clearInterval(id);

区别与联系:

1.首先从概念上来说明,setTimeout多少时间之后执行某操作,只执行一次,而setInterval每隔多少时间之后执行某操作,如果不用clearInterval清除的话,将会一直执行下去;

2.两个方法都返回一个id值,用于清除定时器,分别是clearTimeout和clearInterval;

3.再次从性能上来说,setTimeout的性能是要优于setInterval的;

4.setTimeout和setInterval都不能保证到了时间点一定会执行,如:setTimeout(fn,5000),并不能保证5s之后一定能执行fn。这得取决于当前js线程队列里面还有没有其他待处理队列,如果刚好没有的话,那么就能刚好执行,如果当前线程里面已经有了其它待处理队列正在执行,那么需要排队,等到javascript线程空闲的时候才会执行定时器;

5.setTimeout是等待循环的操作执行完成之后,才继续在间隔时间之后再把循环操作添加到javascript的线程里面,而setInterval是不等待的,它从来不管放在线程里面循环操作有没有执行完成,反正到点就会把循环操作添加到javascript线程队列里面;

6.能用setInterval实现的操作,一定能用setTimeout来实现。

任务队列:

1.是一个事件的队列或者消息的队列。

2.所有任务都是在主线程上执行,形成一个执行栈(execution context stack);

3.执行完js主线程的代码才会去看浏览器任务队列中的事件,再执行js代码中该事件对应的代码;

4.任务队列里放的是ajax这类的任务,是交给浏览器发起HTTP请求去执行的,当有了返回结果就会在任务队列中增加一个事件表示该ajax请求已经返回了结果,任务队列里的任务和js主线程是同时执行的。 不影响js是单线程的这个结论,只能说浏览器还会提供接口来供js

实现异步操作;

5.一旦执行栈中所有同步任务执行完毕,系统会自动读取“任务队列”中的看看有什么事件,那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行;

6.主线程不断重复上面的第5步(只要主线程空了,就会读取任务队列,这个过程会不断重复,这也就是js的运行机制)。