现在有多个异步操作ajax请求,我们需要当所有异步请求都成功的时候,执行后续操作

1》场景：

现在有多个异步操作ajax请求,我们需要当所有异步请求都成功的时候,执行后续操作

2》方法

方法一：通常的讲,我们可以设置一个flag变量,然后在各自的ajax的成功回调内去维护这个变量数量，当满足条件时,我们来触发后续函数

方法二：

jq的$.when().done()

$.when( 
    $.ajax(),
    $.ajax(),
    $.ajax() ).done(fn).fail(fn);

当内部传入的3个ajax都执行了成功的回调, done里的函数才会被触发,
而当有一个ajax执行失败了，fail就被触发。

方法三：

Promise.all([promise1,promise2]).then(function(){})

3》网页加载完成

window.onload=function(){
	alert("网页加载完毕")
}
document.onreadystatechange=function(){
	if(document.readyState=='complete'){
		alert("加载完")
	}
}

4》图片加载完成

扫描二维码关注公众号，回复： 2352768 查看本文章

方法一：onload

通过监听图片的onload事件，可以判断图片是否已经加载完成，兼容所有的浏览器（w3c推荐方法）

document.getElementById("img1").onload=function(){
	alert("图片加载完")
}

方法二：

判断img对象（DOM）的complete属性（兼容所有浏览器）

var timer=setInterval(function(){
	if(document.getElementById("img1").complete){
      clearInterval(timer);
      alert("图片加载完")
	}
},10)

方法三：

.onreadystatechange事件（该方法仅在ie下可用）

document.getElementById('img1').onreadystatechange = function() {
if(document.getElementById('img1').readyState=="complete"||document.getElementById('img1').readyState=="loaded"){
alert("图片加载完")
}
}
补充多张图片：
var imgTotal = mulitImg.length;
 for(var i = 0 ; i < imgTotal ; i++){
    img[i] = new Image()
    img[i].src = mulitImg[i]
    img[i].onload = function(){
       //第i张图片加载完成
       flag++
       if( flag == imgTotal ){
          //全部加载完成
       }
    }
 }
 let promiseAll = [], img = [], imgTotal = mulitImg.length;
 for(let i = 0 ; i < imgTotal ; i++){
     promiseAll[i] = new Promise((resolve, reject)=>{
         img[i] = new Image()
         img[i].src = mulitImg[i]
         img[i].onload = function(){
              //第i张加载完成
              resolve(img[i])
         }
     })
 }
 Promise.all(promiseAll).then((img)=>{
     //全部加载完成
 })