1. 程式人生 > >現在有多個非同步操作ajax請求,我們需要當所有非同步請求都成功的時候,執行後續操作

現在有多個非同步操作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》圖片載入完成

方法一: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)=>{
     //全部載入完成
 })