JavaScript同步执行任务与异步执行任务

前置基础

        这篇笔记我想简单理解为什么需要异步

同步执行任务与异步任务

同步任务

        JS是单线程的,这就意味着在大多数场景中,同一时间只能执行一个任务,当上一个任务完成之后,下一个任务才可以开始执行,按照这样顺序依次在线程中等待执行的任务称为同步任务(非耗时任务)

        JS引擎会按照从上到下的顺序执行代码中的每一个同步任务

例如:

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
console.log(6);

// 结果 1 2 3 4 5 6

        但是同步执行任务有一个问题,当上一个任务执行时间过长或是任务一直没有执行结束,就会影响到下一个任务的执行

console.log(1);
console.log(2);

for(var i = 1; i < 100000; i++){
  console.log('同步执行循环中');
}

console.log(3);
console.log(4);

           (上面的代码可能会导致你的页面卡死请慎用)在实际的代码中我们很少会这样做,但是通常的情况是使用ajax网络请求获取一些资源,比如图片资源,网速是影响网络资源请求快慢的原因之一,如果我们使用同步任务进行网络请求,一但出现网速较慢网络资源请求不过来的情况,就会导致程序卡住(线程阻塞),会影响之后的一些列操作,比如点击按钮,打开菜单等用户交互行为,这会让用户的体验十分糟糕

例如:

// 伪代码

console.log(1);
console.log(2);

ajax( '请求图片地址' )
// 因为网速较慢导致线程阻塞
// 所以之后的操作都会延后

console.log(3);
console.log(4);

异步任务 

        所以我们需要另一种任务执行方式,当某一个任务可能存在执行时间过长影响到后面任务的执行时,我们可以选择将这个任务搁置在一边执行,进而执行其他任务,当这个搁置的被任务执行完毕之后,通过某种方式(回调函数)得到任务的执行结果,这样执行任务的方式称为异步执行,被搁置的任务可以称为异步任务(耗时任务)

        写这篇笔记只是单纯的理解,什么是同步,什么是异步,执行同步任务遇到了什么问题才会执行异步任务

注

        该文章仅仅是学习过程的中理解,如果存在问题,欢迎提出与讨论

参考书籍

        网络