すべてのjQuery Ajaxリクエストが完了するまで待ってください。
すべてのjQuery Ajaxリクエストが別の関数内で行われるまで関数を待機させる方法
つまり、次のリクエストを実行する前に、すべてのAjaxリクエストが完了するのを待つ必要があります。しかし、どうですか？
この目的のために、jQueryは when関数 を定義しています。
引数として任意の数のDeferredオブジェクトを受け取り、それらがすべて解決されると関数を実行します。
つまり、（たとえば）4つのajaxリクエストを開始し、それが完了したらアクションを実行したい場合は、次のようにします。
$.when(ajax1(), ajax2(), ajax3(), ajax4()).done(function(a1, a2, a3, a4){
// the code here will be executed when all four ajax requests resolve.
// a1, a2, a3 and a4 are lists of length 3 containing the response text,
// status, and jqXHR object for each of the four ajax calls respectively.
});
function ajax1() {
// NOTE: This function must return the value
// from calling the $.ajax() method.
return $.ajax({
url: "someUrl",
dataType: "json",
data: yourJsonData,
...
});
}
私の意見では、それは明確で明確な構文を作り、あなたのページが発展するにつれて望まれない副作用をもたらすかもしれないajaxStartやajaxStopのようなどんなグローバル変数も含むことを避けます。
待つ必要があるajax引数の数を事前に知らない場合（つまり、可変数の引数を使用したい場合）、それを実行することはできますが、少しトリッキーです。 を参照してください。$ .when（） （および可変数の引数を使用したトラブルシューティングの場合は jQueryには ）にDeferredの配列を渡します。
Ajaxスクリプトなどの失敗モードをさらに細かく制御する必要がある場合は、.when()によって返されるオブジェクトを保存できます。これは、元のすべてのajaxクエリを包含するjQuery Promise オブジェクトです。 .then()または.fail()を呼び出して、詳細な成功/失敗ハンドラを追加できます。
ドキュメントですべてのajaxリクエストが終了するまで待ちたい場合は、リクエストの数に関係なく、 $.ajaxStop event this use this：
$(document).ajaxStop(function () {
// 0 === $.active
});
この場合、将来終了する可能性のあるアプリケーション内のリクエストの数を推測する必要はありません。場合によっては、ajaxリクエストは関数の内部ロジックの一部になる可能性があり、これは非常に複雑になる場合があります（他の関数の呼び出しなど）。その場合、その関数がonlyajax部分の完了を待機しています。
$.ajaxStop ここでも、HTMLによって変更されると思われるajaxノードにバインドできます。
繰り返しますが、このハンドラーの目的は、activeajaxが存在しないことを確認することです。
追伸ES6構文の使用を気にしない場合は、既知のajaxメソッドにPromise.allを使用できます。例：
Promise.all([ajax1(), ajax2()]).then(() => {
// all requests finished successfully
}).catch(() => {
// all requests finished but one or more failed
})
ここで興味深い点は、Promisesおよび$.ajax要求の両方で機能することです。 jsFiddle は最後の例を示しています。
jQuery ajaxQueue
//This handles the queues
(function($) {
var ajaxQueue = $({});
$.ajaxQueue = function(ajaxOpts) {
var oldComplete = ajaxOpts.complete;
ajaxQueue.queue(function(next) {
ajaxOpts.complete = function() {
if (oldComplete) oldComplete.apply(this, arguments);
next();
};
$.ajax(ajaxOpts);
});
};
})(jQuery);
その後、次のようにキューにajaxリクエストを追加します。
$.ajaxQueue({
url: 'page.php',
data: {id: 1},
type: 'POST',
success: function(data) {
$('#status').html(data);
}
});
注： /上記の回答は、この回答が書かれた時点では存在しなかった機能を使用しています。私はこれらのアプローチの代わりにjQuery.when()を使うことを勧めます、しかし私は歴史的な目的のために答えを残しています。
-
それをどのように実装するかはあなたのコードに依存するでしょうが、あなたはおそらく単純なカウントセマフォでたどることができます。簡単な例は次のようになります。
var semaphore = 0, // counting semaphore for ajax requests
all_queued = false; // bool indicator to account for instances where the first request might finish before the second even starts
semaphore++;
$.get('ajax/test1.html', function(data) {
semaphore--;
if (all_queued && semaphore === 0) {
// process your custom stuff here
}
});
semaphore++;
$.get('ajax/test2.html', function(data) {
semaphore--;
if (all_queued && semaphore === 0) {
// process your custom stuff here
}
});
semaphore++;
$.get('ajax/test3.html', function(data) {
semaphore--;
if (all_queued && semaphore === 0) {
// process your custom stuff here
}
});
semaphore++;
$.get('ajax/test4.html', function(data) {
semaphore--;
if (all_queued && semaphore === 0) {
// process your custom stuff here
}
});
// now that all ajax requests are queued up, switch the bool to indicate it
all_queued = true;
これを{async：false}のように動作させたいがブラウザをロックしたくない場合は、jQueryキューを使用して同じことを実行できます。
var $queue = $("<div/>");
$queue.queue(function(){
$.get('ajax/test1.html', function(data) {
$queue.dequeue();
});
}).queue(function(){
$.get('ajax/test2.html', function(data) {
$queue.dequeue();
});
}).queue(function(){
$.get('ajax/test3.html', function(data) {
$queue.dequeue();
});
}).queue(function(){
$.get('ajax/test4.html', function(data) {
$queue.dequeue();
});
});
ajaxStopイベントを使用してください。
たとえば、100個のajaxリクエストを取得しているときに loading ... というメッセージがあり、そのメッセージを一度ロードしたら非表示にしたいとします。
JQueryから doc ：
$("#loading").ajaxStop(function() {
$(this).hide();
});
そのページですべてのajaxリクエストが行われるのを待つことに注意してください。
ちょっとした回避策はこのようなものです。
// Define how many Ajax calls must be done
var ajaxCalls = 3;
var counter = 0;
var ajaxCallComplete = function() {
counter++;
if( counter >= ajaxCalls ) {
// When all ajax calls has been done
// Do something like hide waiting images, or any else function call
$('*').css('cursor', 'auto');
}
};
var loadPersons = function() {
// Show waiting image, or something else
$('*').css('cursor', 'wait');
var url = global.ctx + '/loadPersons';
$.getJSON(url, function(data) {
// Fun things
})
.complete(function() { **ajaxCallComplete();** });
};
var loadCountries = function() {
// Do things
var url = global.ctx + '/loadCountries';
$.getJSON(url, function(data) {
// Travels
})
.complete(function() { **ajaxCallComplete();** });
};
var loadCities = function() {
// Do things
var url = global.ctx + '/loadCities';
$.getJSON(url, function(data) {
// Travels
})
.complete(function() { **ajaxCallComplete();** });
};
$(document).ready(function(){
loadPersons();
loadCountries();
loadCities();
});
願っています...
javascriptはイベントベースなので、絶対に wait にしないで、フック/コールバックを設定してください
おそらく jquery.ajax のsuccess/completeメソッドを使うことができます。
または、 .ajaxComplete を使用することもできます。
$('.log').ajaxComplete(function(e, xhr, settings) {
if (settings.url == 'ajax/test.html') {
$(this).text('Triggered ajaxComplete handler.');
//and you can do whatever other processing here, including calling another function...
}
});
あなたのajaxリクエストがより正確に呼ばれる方法の擬似コードを投稿すべきですが...
他の回答が述べたように、すべてのajaxリクエストが完了するまで待つためにajaxStop()を使うことができます。
$(document).ajaxStop(function() {
// This function will be triggered every time an ajax is requested and completed
});
しかし、特定のajax()リクエストに対してこれを実行したい場合は、特定のajaxリクエスト内でcomplete()メソッドを使用するのが最善です。
$.ajax({
type: "POST",
url: "someUrl",
success: function(data) {
// This function will be triggered when ajax returns a 200 status code (success)
},
complete: function() {
// This function will be triggered always, when ajax request is completed, even it fails/returns other status code
},
error: function() {
// This will be triggered when ajax request fail.
}
});
簡単なものが必要な場合かつて終わったコールバック
//multiple ajax calls above
var callback = function () {
if ($.active !== 0) {
setTimeout(callback, '500');
return;
}
//whatever you need to do here
//...
};
callback();
アレックスの答えを広げるために、私は可変的な議論と約束を持つ例を持っています。私はAjaxを介して画像をロードし、それらがすべてロードされた後にそれらをページに表示したいと思いました。
それをするために、私は以下を使いました：
let urlCreator = window.URL || window.webkitURL;
// Helper function for making ajax requests
let fetch = function(url) {
return $.ajax({
type: "get",
xhrFields: {
responseType: "blob"
},
url: url,
});
};
// Map the array of urls to an array of ajax requests
let urls = ["https://placekitten.com/200/250", "https://placekitten.com/300/250"];
let files = urls.map(url => fetch(url));
// Use the spread operator to wait for all requests
$.when(...files).then(function() {
// If we have multiple urls, then loop through
if(urls.length > 1) {
// Create image urls and tags for each result
Array.from(arguments).forEach(data => {
let imageUrl = urlCreator.createObjectURL(data[0]);
let img = `<img src=${imageUrl}>`;
$("#image_container").append(img);
});
}
else {
// Create image source and tag for result
let imageUrl = urlCreator.createObjectURL(arguments[0]);
let img = `<img src=${imageUrl}>`;
$("#image_container").append(img);
}
});
単一または複数のURLで動作するように更新されました： https://jsfiddle.net/euypj5w9/
私はすべてのAjaxの読み込みが完了したときにサイズチェックを使用しています
function get_ajax(link, data, callback) {
$.ajax({
url: link,
type: "GET",
data: data,
dataType: "json",
success: function (data, status, jqXHR) {
callback(jqXHR.status, data)
},
error: function (jqXHR, status, err) {
callback(jqXHR.status, jqXHR);
},
complete: function (jqXHR, status) {
}
})
}
function run_list_ajax(callback){
var size=0;
var max= 10;
for (let index = 0; index < max; index++) {
var link = 'http://api.jquery.com/ajaxStop/';
var data={i:index}
get_ajax(link,data,function(status, data){
console.log(index)
if(size>max-2){
callback('done')
}
size++
})
}
}
run_list_ajax(function(info){
console.log(info)
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>$.whenは私のために働きません、return xの代わりにcallback(x)はここで説明されるように働きました： https://stackoverflow.com/a/13455253/10357604
@BBonifieldの回答に基づいて、セマフォロジックがすべてのajax呼び出しに分散しないようにユーティリティ関数を作成しました。
untilAjaxは、すべてのajaxCallが完了したときにコールバック関数を呼び出すユーティリティ関数です。
ajaxObjsは、ajax設定オブジェクト[http://api.jquery.com/jQuery.ajax/]の配列です。
fnはコールバック関数です
function untilAjax(ajaxObjs, fn) {
if (!ajaxObjs || !fn) {
return;
}
var ajaxCount = ajaxObjs.length,
succ = null;
for (var i = 0; i < ajaxObjs.length; i++) { //append logic to invoke callback function once all the ajax calls are completed, in success handler.
succ = ajaxObjs[i]['success'];
ajaxObjs[i]['success'] = function(data) { //modified success handler
if (succ) {
succ(data);
}
ajaxCount--;
if (ajaxCount == 0) {
fn(); //modify statement suitably if you want 'this' keyword to refer to another object
}
};
$.ajax(ajaxObjs[i]); //make ajax call
succ = null;
};
例：doSomething関数はuntilAjaxを使用します。
function doSomething() {
// variable declarations
untilAjax([{
url: 'url2',
dataType: 'json',
success: function(data) {
//do something with success data
}
}, {
url: 'url1',
dataType: 'json',
success: function(data) {
//do something with success data
}
}, {
url: 'url2',
dataType: 'json',
success: function(response) {
//do something with success data
}
}], function() {
// logic after all the calls are completed.
});
}
async.js を使うこともできます。
タイムアウトやSqlLiteの呼び出しなど、単なるajaxリクエストではなく、約束をサポートしないあらゆる種類の非同期呼び出しをマージできるので、$ .whenよりも優れていると思います。
ゼロから始めるのであれば、 $ .when（） を使用することを強くお勧めします。
この質問には100万を超える回答がありますが、私はまだ私の場合に役立つものは何も見つけられませんでした。既存のコードベースを処理する必要があり、すでにいくつかのajax呼び出しを行っていて、複雑な約束を導入したり、全体をやり直したりしたくないとしましょう。
永遠にjQueryの一部となっているjQueryの.data、.onおよび.trigger関数を簡単に利用できます。
私の解決策の良いところは：
コールバックが正確に依存しているのは明らかです。
関数
triggerNowOrOnLoadedはデータが既にロードされているかどうかを気にしません既存のコードにプラグインするのはとても簡単です
$(function() {
// wait for posts to be loaded
triggerNowOrOnLoaded("posts", function() {
var $body = $("body");
var posts = $body.data("posts");
$body.append("<div>Posts: " + posts.length + "</div>");
});
// some ajax requests
$.getJSON("https://jsonplaceholder.typicode.com/posts", function(data) {
$("body").data("posts", data).trigger("posts");
});
// doesn't matter if the `triggerNowOrOnLoaded` is called after or before the actual requests
$.getJSON("https://jsonplaceholder.typicode.com/users", function(data) {
$("body").data("users", data).trigger("users");
});
// wait for both types
triggerNowOrOnLoaded(["posts", "users"], function() {
var $body = $("body");
var posts = $body.data("posts");
var users = $body.data("users");
$body.append("<div>Posts: " + posts.length + " and Users: " + users.length + "</div>");
});
// works even if everything has already loaded!
setTimeout(function() {
// triggers immediately since users have been already loaded
triggerNowOrOnLoaded("users", function() {
var $body = $("body");
var users = $body.data("users");
$body.append("<div>Delayed Users: " + users.length + "</div>");
});
}, 2000); // 2 seconds
});
// helper function
function triggerNowOrOnLoaded(types, callback) {
types = $.isArray(types) ? types : [types];
var $body = $("body");
var waitForTypes = [];
$.each(types, function(i, type) {
if (typeof $body.data(type) === 'undefined') {
waitForTypes.Push(type);
}
});
var isDataReady = waitForTypes.length === 0;
if (isDataReady) {
callback();
return;
}
// wait for the last type and run this function again for the rest of the types
var waitFor = waitForTypes.pop();
$body.on(waitFor, function() {
// remove event handler - we only want the stuff triggered once
$body.off(waitFor);
triggerNowOrOnLoaded(waitForTypes, callback);
});
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>Hi!</body>私の解決策は以下の通りです
var request;
...
'services': {
'GetAddressBookData': function() {
//This is the primary service that loads all addressbook records
request = $.ajax({
type: "POST",
url: "Default.aspx/GetAddressBook",
contentType: "application/json;",
dataType: "json"
});
},
...
'apps': {
'AddressBook': {
'data': "",
'Start': function() {
...services.GetAddressBookData();
request.done(function(response) {
trace("ajax successful");
..apps.AddressBook.data = response['d'];
...apps.AddressBook.Filter();
});
request.fail(function(xhr, textStatus, errorThrown) {
trace("ajax failed - " + errorThrown);
});
とてもうまくいった。私はこれを行うために多くの異なる方法を試してみましたが、私はこれが最も単純で最も再利用可能であることがわかりました。それが役に立てば幸い
shift()を使った簡単な方法を見つけました
function waitReq(id)
{
jQuery.ajax(
{
type: 'POST',
url: ajaxurl,
data:
{
"page": id
},
success: function(resp)
{
...........
// check array length if not "0" continue to use next array value
if(ids.length)
{
waitReq(ids.shift()); // 2
)
},
error: function(resp)
{
....................
if(ids.length)
{
waitReq(ids.shift());
)
}
});
}
var ids = [1, 2, 3, 4, 5];
// shift() = delete first array value (then print)
waitReq(ids.shift()); // print 1
私の解決策を見てください。
1.この関数（および変数）をJavaScriptファイルに挿入します。
var runFunctionQueue_callback;
function runFunctionQueue(f, index, callback) {
var next_index = index + 1
if (callback !== undefined) runFunctionQueue_callback = callback;
if (f[next_index] !== undefined) {
console.log(index + ' Next function avalaible -> ' + next_index);
$.ajax({
type: 'GET',
url: f[index].file,
data: (f[index].data),
complete: function() {
runFunctionQueue(f, next_index);
}
});
} else {
console.log(index + ' Last function');
$.ajax({
type: 'GET',
url: f[index].file,
data: (f[index].data),
async: false,
complete: runFunctionQueue_callback
});
}
}
このように、あなたの要求で配列を構築します。
var f = [
{file: 'file_path', data: {action: 'action', data: 'any_data}},
{file: 'file_path', data: {action: 'action', data: 'any_data}},
{file: 'file_path', data: {action: 'action', data: 'any_data}},
{file: 'file_path', data: {action: 'action', data: 'any_data}}
];
3.コールバック関数を作成します。
function Function_callback() {
alert('done');
}
4.パラメータを指定してrunFunctionQueue関数を呼び出します。
runFunctionQueue(f, 0, QuestionInsert_callback);
// first parameter: array with requests data
// second parameter: start from first request
// third parameter: the callback function
jQueryでは、ajaxリクエストを非同期にするかどうかを指定できます。あなたは単にajaxリクエストを同期させることができ、それから残りのコードはそれらが戻るまで実行されないでしょう。
例えば：
jQuery.ajax({
async: false,
//code
});
私はこの問題に出会い、それを解決するための一般的なプラグインjquery_counterを作成しました： https://bitbucket.org/stxnext/jquery_counter/