仅在执行所有 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.all();

请注意，success 不是承诺链的一部分，因此您需要 then()

在每个外部 $.ajax.then() 中返回 #2 ajax 承诺也继续构建承诺链

类似：

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: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
       }
   }  
});

添加了一个更脏的方法来避免这种 while 循环首先运行并提前刷新。我希望问题海报更喜欢使用@charlietfl 的答案或使用如下所示的下划线方法

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