JS之异步概念

概念 什么是JS异步

异步加载也叫非阻塞模式加载,浏览器在下载js的同时,还会执行后续的页面处理.

什么时候须要异步

1 须要等待的状况

2 在等待过程当中不能像alert同样阻塞程序运行

3 等待的状况须要异步

使用场景:

1 定时任务setTimeout, setInterval

console.log(100);
 setTimeout(function(){
   console.log(200);
 },1000); //异步执行，非阻塞并不妨碍后续代码执行
 console.log(300);
//执行顺序为100 300 200

2   网络请求 ajax 动态<img> 加载

console.log("start");
 var img=document.createElement("img");
 img.onload=function(){
   console.log("loaded");
 }
 img.src="https://ps.ssl.qhimg.com/sdmt/75_135_100/t01525fd8d9773b149f.jpg";
 document.body.append(img);
 console.log("end");
 //执行顺序是 start end loaded 图片的加载时异步的

3  事件绑定

console.log("start");
 document.getElementById("btn").addEventListener("click",function(){
   console.log("clicked");
 });
 console.log("end");
 //执行顺序是start ,end 若是点击才执行clicked 若是不点永远不执行 也是异步的

典型的同步加载的例子：

console.log(100);
 alert(200);
 console.log(300);
 //同步打印100，弹出200，打印300，取决于按下‘肯定’框的时间，不按就一直卡顿在那

同步或非同步，代表着是否须要将整个流程按顺序地完成

阻塞或非阻塞，意味着你调用的函数会不会马上告诉你结果

2、在js中的阻塞与同异步

你有一个函数和一段程序。

2.1 js中的同步阻塞

// 这是一个阻塞式函数, 将一个文件复制到另外一个文件上
function copyBigFile(afile, bfile){
    var result = copyFileSync(afile,bfile);
    return result;
}

调用这个”copyBigFile()”函数，将一个大文件复制到另外一个文件上，将耗时１小时。意味着这个函数的将在一个小时以后返回。

//这是一段程序
console.log("start copying ... ");    
var a = copyBigFile('A.txt', 'B.txt');  //这行程序将耗时1小时
console.log("Finished");   // 这行程序将在一小时后执行
console.log("处理一下别的事情");　　// 这行程序将在一小时后执行
console.log("Hello World, 整个程序已加载完毕，请享用"); // 这行程序将在一小时后执行

以上的程序就是一个同步阻塞的例子，由于copyFileSync函数返回值的过程须要漫长的时间，因此线程也没法继续执行下去，只能等待。

2.2 js中的同步非阻塞

// 这是一个非阻塞式函数
// 若是复制已完成，则返回 true, 若是未完成则返回 false
function copyBigFile(afile,bfile){
    var copying = copyFileAsync(afile, bfile);
    var isFinished = !copying;
    return !isFinished; 
}

调用这个函数将马上返回结果，而后你的程序就能够写成

console.log("start copying ... ");    
while( a = copyBigFile('A.txt', 'B.txt')){
  console.log("在这之间还能够处理别的事情");
} ;  
console.log("Finished");   // 这行程序将在一小时后执行
console.log("Hello World, 整个程序已加载完毕，请享用"); // 这行程序将在一小时后执行

一个非阻塞式的函数，给你的编程带来了更多的便利，你能够在长IO操做的同时，写点其余的程序，提升效率。执行结果以下

start copying ... 在这之间还能够处理别的事情 在这之间还能够处理别的事情 在这之间还能够处理别的事情 ... Finished Hello World, 整个程序已加载完毕，请享用

2.3 js中的异步非阻塞

咱们看到，一个非阻塞式的函数能给咱们编程带来许多灵活性，咱们喜欢非阻塞式的函数。 
可是，又能够看到同步的程序须要在一个循环中轮询结果，循环里面的程序会被执行好多遍，因此并很差控制来写一些正常的程序，很难再利用起来。 
因此咱们须要一种更为合理的方式对非阻塞式的函数进行利用。 
也就是我不会主动地去询问结果，而是当你有告终果的时候再来通知我。 
// 这是一个非阻塞式函数 
// 若是复制已完成，则返回 true, 若是未完成则返回 false

//非阻塞式的有异步通知能力的函数
//如下不须要看懂，只用知道这个函数会在完成copy操做以后，执行success
function copyBigFile(afile,bfile, callback){
    var copying = copyFileAsync(afile, bfile, function(){ callback();});
    var isFinished = !copying;
    return !isFinished; 
}

这个函数不一样于上一个同步非阻塞函数的地方在于，它具备通知功能，也就是说，它可以在完成操做以后主动地通知程序，“我完成了”。因而有程序以下,

console.log("start copying ... ");    
copyBigFile("A.txt","B.txt", function(){
          console.log("Finished");   //一个小时后被执行
          console.log("Hello World, 整个程序已加载完毕，请享用"); //一个小时后被执行
          })
console.log("干别的事情"); 
console.log("作一些别的处理"); 

程序在调用copyBigFile函数以后，能够当即得到返回值，线程没有被阻塞住，因而还能够去干些别的事情，而后当copyBigFile完成以后，会执行指定的函数。因此程序的输出应为,

start copying ...
干别的事情
作一些别的处理
Finished
Hello World, 整个程序已加载完毕，请享用

在这种状况下，程序更容易控制，流程更为清晰。一些“别的事情”能够在函数还未通知以前进行处理，充分地提升了线程的利用效率。