複数の非同期操作ajaxリクエストがあります.すべての非同期リクエストが成功した場合、後続の操作を実行する必要があります.
2089 ワード
1)シーン:
複数の非同期操作ajaxリクエストがあります.すべての非同期リクエストが成功した場合、後続の操作を実行する必要があります.
2)方法
方法1:通常、flag変数を設定し、それぞれのajaxの成功したコールバックでこの変数の数を維持することができます.条件を満たすと、後続の関数をトリガーします.
方法2:
jqの$when().done()
内部から転送された3つのajaxが成功したコールバックを実行するとdoneの関数がトリガーされ、1つのajaxが失敗するとfailがトリガーされます.
方法3:
Promise.all([promise1,promise2]).then(function(){})
3』Webページのロード完了
4』画像のロード完了
方法一:onload
画像のonloadイベントを傍受することで、画像がロード済みかどうかを判断し、すべてのブラウザに互換性がある(w 3 c推奨方法)
方法2:
imgオブジェクト(DOM)のcompleteプロパティを判断する(すべてのブラウザに対応)
方法3:
.onreadystatechangeイベント(ieでのみ使用可能)
複数の非同期操作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)=>{
//
})