只有在所有ajax脚本都执行完毕时才刷新页面

Question

我试图在单击按钮.button时触发几个操作我首先需要清理每个包含类.classToClean的<div>，并启动一些ajax脚本来更新数据库。为此，我选择了$(.classToClean).each(function(index){});结构，然后选择了ajax$.ajax({})结构。到目前为止，我的代码是这样的。

$(".button").on("click", function () {
///// each loop /////
$( ".classToClean" ).each(function( index ) {
$.ajax({
//... (clean 1)
success:function(response){
$.ajax({
//... (clean 2)
success:function(response){
}
});
}
});
});
///// /each loop /////
});

一旦清理干净，我想将新语句写入数据库，但这次我只需要ajax。结果我得到了这样的东西：

$(".button").on("click", function () {
///// each loop /////
$( ".classToClean" ).each(function( index ) {
$.ajax({
//... (clean 1)
success:function(response){
$.ajax({
//... (clean 2)
success:function(response){
}
});
}
});
});
///// /each loop /////
$.ajax({
//... (write 1)
success:function(response){
$.ajax({
//... (write 2)
success:function(response){
}
});
}
});
});

一切都很好，但我想在each()和ajax完成后刷新。通常我只有一个脚本，所以我添加了一个类似的成功函数

success:function(response){
location.href = "...";
},

但因为我有很多脚本要运行，所以似乎没有合适的地方放它。例如，如果我把它放在"write 2"成功函数中，有时.each()似乎还没有完成，所以在执行一些脚本之前会刷新页面。因此，我的问题是：有没有一种方法可以只在所有脚本都在.each和ajax中执行时刷新？

Answer 1

将这些元素映射到一个请求Promise数组，以便将该数组传递给Promise.all((；

注意，success不是承诺链的一部分，所以您需要then()而不是

在每个外部$.ajax.then((中返回#2 ajax promise，以继续构建promise链

类似于：

const cleanRequests = $('.classToClean').map(function (index, element) {
// return clean 1 to array
return  $.ajax({ /*clean 1 options*/}).then(function (clean1_response) {
// return clean2 promise
return $.ajax({ /*clean 2 options*/ }).then(function (clean2Response) {
// not sure what you want returned
});
});
}).get();
Promise.all(cleanRequests).then(function (allCleanResults) {
// all the clean requests are done, do the write stuff
return $.ajax({/*write 1 options*/}).then(function (write1_response) {
return $.ajax({ /*write 2 options*/ }).then(function (write2Response) {
// not sure what you want returned
});
});
})
.then(function () {
/// all done, reload page
})
.catch(function (err) {
console.log('Oooops something went wrong');
});

Answer 2

尝试使用complete而不是success

complete:function(response){
}

实际上，如果只需要用更新的数据库替换div，就不需要刷新和清理。只需使用replaceWith((来替换div或整个页面，或者在只需要替换几个元素而不是整个页面的情况下使用html((

示例：

$(".button").on("click", function () {
$.ajax{
....
complete:function(response){
updatedDiv = "your div html code";
$(#yourdiv).replaceWith(updatedDiv);
}
});
}

Answer 3

实际上有几种方法。肮脏的方式。初始化一个计数变量并进行检查，如果它变为0，则刷新。

var c = 0;
var f = None;
$(".button").on("click", function () {
f = 1;
///// each loop /////
c +=1;
$( ".classToClean" ).each(function( index ) {
$.ajax({
//... (clean 1)
success:function(response){
$.ajax({
//... (clean 2)
success:function(response){
c -=1;
}
});
}
});
});
///// /each loop /////
c +=1 ;
$.ajax({
//... (write 1)
success:function(response){
$.ajax({
//... (write 2)
success:function(response){
c -= 1;
}
});
}
});
});
while (true) {
if (c == 0 && f != None) {
break;
//refresh here
}
}  
});

添加了一个更脏的方法来避免这种情况，同时循环首先运行并提前刷新。我更喜欢问题海报使用@charlietfl的答案或使用下面显示的下划线方法

Goodway：使用下划线afterhttps://underscorejs.org/#after