JS的同步、异步

JS中的同步、异步

1.标签的异步

1、图片标签加载是异步的;
加载a.js做了异步,等待加载完成后再去执行,而在加载的同时,继续向下执行加载b标签,并且执行b标签;
2.只有defer，仍然是同步,上面的内容加载完成后执行,async和defer一起使用时,当前页面所有元素创建并且加载完成后执行;

a.创建html标签;
b.创建head,并且使用link加载css样式（异步）,加载script标签是同步;
c.如果加载的script过大,就会拥塞link的加载和图片的加载,一旦拥塞，如果script执行完成后,不再恢复link和图片的加载;
d.创建body，所有标签,除了img,音频视频标签是异步加载,其它的都是同步加载;
e.body创建完成后,将css样式,link的加载样式和行内样式合并应用给标签
;f.图片等异步加载内容完成(包括script标签使用async);
g.所有加载完成后,script标签标注 async defer才执行,window.onload才执行;

2.async await可以把异步变成同步

1.async await 必须使用Promise;
2.await必须写在async函数中;
3.await等待promise中执行了resolve或者reject才会执行;
4.async函数执行的结果返回一个Promis；
5.await时的promise传出的值,使用then获取;
6.async函数运行最后return 出的值需要在执行函数后then中获取;
Demo:

async function fn(){            
	console.log("a");            
	await getPromise().then(function(num){                		
		 console.log(num);           
	 })            
	 console.log("c");            
	 return 10;       
	  }        
	  function getPromise(){            
	  	return new Promise(function(res,rej){                	
	  		setTimeout(function(){                     	
	  			console.log("b");                    
	  			res(1);                 
	  		},500);            
	  })       
 }              
 // var a=fn();            
 // console.log(a);            
 fn().then(function(num){                
 	console.log(num);            
 })
 a,b,1,c,10

3.同步、异步

a.同步一定是逐行执行，当过程中需要等待,停下等待完成后执行下一句，这个就是同步;
b.异步就是当需要时间处理时,不停止,后面继续执行,需要的时间结束后在继续处理里面的内容;
c.js代码中script标签加载是同步的,dom标签创建是同步的,for循环是同步的, async await是同步,所有遍历方法是同步;
d.前端代码需要时间的都是异步的,有时我们需要做到先后顺序处理.函数式调用;
e.函数是语句块形式,如果我们在等待时间后执行函数就相对与将语句块顺序发生改变;
f.setTimeout/setInterval/load/promise/(异步的)
f.同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
==“任务队列”==是一个事件的队列（也可以理解成消息的队列），IO设备完成一项任务，就在"任务队列"中添加一个事件，表示相关的异步任务可以进入"执行栈"了。主线程读取"任务队列"，就是读取里面有哪些事件。
g.异步执行的运行机制:
（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
（ 3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
（4）主线程不断重复上面的第三步。
Demo1:

 for(var i=0;i<10;i++){                
 	fn();//循环执行10词语句块            
 }           
  function fn(){                
  	setTimeout(function(){                    
  		console.log(i);//i是全局的i               
  	 },10);           
   }
   //这两种写法结果一样            
   for(var i=0;i<10;i++){               
   	setTimeout(function(){                    
   		console.log(i);//i是全局的i                
   	},10);            
   }
//打印的是10个10;

Demo2:

 for(var i=0;i<10;i++){               
  	fn(i);//循环执行10词语句块            
  }            
  function fn(i){                
  	setTimeout(function(){                    
  		console.log(i);//i是局部的i                
  	},10);            
  }
  //打印的是0-9;

4.await async

a.async用来定义函数,函数是一个异步执行的,在函数中使用return返回内容时,其实执行函数是返回的是一个promise,我们可以操作promise来调用这个异步函数返回的值;
b.await实际是在异步函数中,调用外部的异步函数时,需要同步执行各个异步函数,那么就可以使用await调用,将返回的值赋予一个变量,或者执行内容,当这个异步执行完成后才去执行下一个异步;
Demo1:

  function loadImg(_src) {            
  	return new Promise(function (resolve, reject) {                
  		let img = new Image();                
  		img.src = _src;                
  		img.onload = function (e) {                    
  		// 当加载成功时执行resolve;                    
  		resolve(img);               
  	 };                
  	 img.onerror = function (e) {                    
  	 // 当加载失败时执行reject                    
  	 	reject(_src + "加载失败了")                
  	 }            
  	});        
  }        
  	let list=["a.jpg","b.jpg","c.png","d.jpg","e.jpg"];        
  	async function fn(){            
  		for(var i=0;i<list.length;i++){                
  		// 将异步改变成同步;不加await是同步的,照片顺序乱的              
  		await  loadImg("./img/"+list[i]).then(function(img){                    
  			console.log(img.src);                
  		})            
  	}       
   }