現在有多個非同步操作ajax請求,我們需要當所有非同步請求都成功的時候,執行後續操作
阿新 • • 發佈:2018-12-31
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)=>{ //全部載入完成 })