複数の非同期操作ajaxリクエストがあります.すべての非同期リクエストが成功した場合、後続の操作を実行する必要があります.

2089 ワード

1)シーン:
複数の非同期操作ajaxリクエストがあります.すべての非同期リクエストが成功した場合、後続の操作を実行する必要があります.
2)方法
方法1:通常、flag変数を設定し、それぞれのajaxの成功したコールバックでこの変数の数を維持することができます.条件を満たすと、後続の関数をトリガーします.
方法2:
jqの$when().done()
$.when( 
    $.ajax(),
    $.ajax(),
    $.ajax() ).done(fn).fail(fn);

内部から転送された3つのajaxが成功したコールバックを実行するとdoneの関数がトリガーされ、1つのajaxが失敗するとfailがトリガーされます.
方法3:
Promise.all([promise1,promise2]).then(function(){})
3』Webページのロード完了
window.onload=function(){
	alert("      ")
}
document.onreadystatechange=function(){
	if(document.readyState=='complete'){
		alert("   ")
	}
}

4』画像のロード完了
方法一:onload
画像のonloadイベントを傍受することで、画像がロード済みかどうかを判断し、すべてのブラウザに互換性がある(w 3 c推奨方法)
document.getElementById("img1").onload=function(){
	alert("     ")
}

方法2:
imgオブジェクト(DOM)のcompleteプロパティを判断する(すべてのブラウザに対応)
var timer=setInterval(function(){
	if(document.getElementById("img1").complete){
      clearInterval(timer);
      alert("     ")
	}
},10)

方法3:
.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)=>{
     //      
 })