同步与异步

24. 同步与异步

1.同步

同步：在主线程上排队执行任务，只有前一个任务完成，才能执行后一个任务。

//同步
alert(a);
alert(123);
alert(1);
 alert(2);

2.异步

异步：不能进入主线程，而是进入任务队列的任务，只有等主线程任务执行完毕，任务队列才会通知主线程，请求执行任务，该任务才会进入主线程执行。

//异步:定时器，ajax,(事件)
setTimeout(function(){//排队，任务对列
alert(1);
},1000);
alert(2);//主线程 

3.回调函数

定义：函数A作为参数(函数引用)传递到另一个函数B中，并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式)，就叫做匿名回调函数。

函数当参数传递到另一个函数。

回调函数的嵌套：可读性差。（回调地狱）

4.promise

异步的一种解决方法，比传统函数强大。主要解决回调函数的嵌套，可读性差的问题。

promise三种状态：
1.进行中：pending
2.成功：reslove
3.失败：reject
状态一旦设定，不能改变。

var promise=new Promise(function(resolve,reject){
console.log('开始设置状态pending');
resolve();//成功，找then里面的方法
reject();//失败，找catch里面的方法
});

promise俩种方法：
1.then() 成功时调用，函数做参数
2.catch() 失败时调用，函数做参数

promise
.then(function(){
console.log('我是成功的回调1');
})
.then(function(){
console.log('我是成功的回调2');
})
.catch(function(){
console.log('我是失败的回调');
}) 

promise构造方法
promise.all()
用多个promise实例包装成一个新的实例。接受一个数组作为参数，只有数组中每个状态都是resolve，则新的 Promise 实例状态才会变成resolve.。才会执行then（）方法

<script>
//所有的图片加载成功，渲染图片。
var arr = [
'https://imgsa.baidu.com/news/q%3D100/sign=e7bf3fb6f31f4134e637017e151e95c1/e7cd7b899e510fb34e85d5c2d733c895d0430cc2.jpg',
'https://imgsa.00/sign=c7d5e87bdc1b0ef46ae89c5eedc451a1/b8014a90f603738dca60ac77bd1bb051f819ecb9.jpg',
'https://imgsa.baidu.com/news/q%3D100/sign=78c0d5c2d733c895a07e9c7be1127397/29381f30e924b899dee5db6d60061d950b7bf68e.jpg',
'https://imgsa.baidu.com/news/q%3D100/sign=3342b85ab60e7bec25da07e11f2fb9fa/b03533fa828ba61ea290647a4f34970a304e596c.jpg'
];

function pic(url) {
var promise = new Promise(function (resolve, reject) {
var oImg = new Image(); //Image:构造函数 Error
oImg.src = url;
oImg.onload = function () { //图片加载成功。window.onload
resolve(oImg);//参数传递给then
};
oImg.onerror = function () { //图片加载失败
reject( '图片加载失败' );//参数传递给catch
}
});
return promise;
}
//用于将多个 Promise 实例，包装成一个新的 Promise 实例
var newpromise=Promise.all([pic(arr[0]),pic(arr[1]),pic(arr[2]),pic(arr[3])]);
newpromise.then(function(imgs){
imgs.forEach((v)=>{
document.body.appendChild(v);
});
}).catch(function(e){
throw new Error(e);
});
</script>