我所理解的js异步和回调

首先应该始终明确:
1、js是单线程的,在同一时间只能执行一件事情。但是浏览器可以处理多个线程任务,
2、回调和异步是两个概念

回调是什么?
回调就是指一个将事先定义好的函数作为参数传入到另外一个函数当中。利用js单线程的机制,确保代码的执行顺序。
var a = function(calback){
//a函数的具体逻辑...

      calback(); 
}
var b = function(){};
a(b);

同步和异步?

我理解的异步:无论同步的还是异步的任务都首先会在js的主线程(单线程)顺序执行,同步的任务会 先执行完前一个任务才会执行下一个任务;但如果是异步的形式的话,首先也是顺序执行到该异步任务,然后就添加到任务队列中等待执行(挂起),只有主线程中的任务执行完了才会去开始执行任务队列中的异步任务,主线程空闲时(同步执行完)从"任务队列"中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为Event Loop(事件循环)。这就是JavaScript的运行机制。

"任务队列"是一个先进先出的数据结构,排在前面的事件,优先被主线程读取。主线程的读取过程基本上是自动的,只要执行栈一清空,"任务队列"上第一位的事件就自动进入主线程。但是,由于存在后文提到的"定时器"功能,主线程首先要检查一下执行时间,某些事件只有到了规定的时间,才可以执行定时器的异步任务。

所谓"回调函数"(callback),就是那些会被主线程挂起来的代码。异步任务必须指定回调函数,当主线程开始执行异步任务,就是执行对应的回调函数。

队列
浏览器是基于一个事件循环的模型,在这里面,可以有多个任务队列,比如render是一个队列,响应用户输入是一个,script执行是一个。任务队列里放的是任务,同一个任务来源的任务肯定在同一个任务队列里。任务有优先级,鼠标或键盘响应事件优先级高,大概是其他任务的3倍。

定时器:定时器是浏览器的又一个线程

1、同步回调
var b = function(){
alert("b")
};

var a = function(callback){
      alert("a");
      callback();//此时执行传入的b函数,保证a执行完成后执行b
};
a(b);

同步的弊端:如果前面的一个任务是耗时的,会阻塞下面的任务执行。

2、for (var i = 1; i <= 3; i++) {
setTimeout(function() { console.log(i); }, 0);
}
结果是4,4,4
分析:同步执行优于异步执行,设置定时任务其实就是强制异步

3、setTimeout(function () { while (true) { } }, 1000);
setTimeout(function () { alert('end 2'); }, 2000);
setTimeout(function () { alert('end 1'); }, 100);
alert('end');
结果是end,end 1
分析:先同步后异步end,定时器添加的异步任务,主线程首先要检查一下执行时间(也就是添加到任务队列的时间),某些事件只有到了规定的时间,才能返回主线程执行,到了规定的时间1000的时候出现死循环阻塞主线程。

4、var start = new Date;
setTimeout(function(){
var end = new Date;
console.log('Time elapsed:', end - start, 'ms');
}, 500);
while (new Date - start < 1000) {};
结果是1000ms左右
分析:先同步后异步,同步while循环需要1000ms,定时器是异步的,但是最终的时间并不是1500ms;因为设置定时器会触发浏览器的定时线程,在500ms到了的时候会将定时器中的回调函数添加进任务队列中等待执行,1000ms执行完同步的任务就会马上执行任务队列中的代码(几乎不耗时),所以最终的时间是1000ms

5、var start = new Date;
setTimeout(function(){
var end = new Date;
console.log('Time elapsed:', end - start, 'ms');
}, 1500);
while (new Date - start < 1000) {};
结果是1500ms左右
分析:先同步后异步;1500才会添加到任务队列中,所以最终的时间是1500ms,同步任务1000ms执行完成后任务队列此时是没有任务等待的,只有在1500ms这个特定的时间点才会添加到任务队列等待执行

存在的错误望指正,本人将不胜感激

你可能感兴趣的:(我所理解的js异步和回调)