仅在执行所有 ajax 脚本时刷新页面

refresh a page only when all the ajax scripts are executed

我试图在单击按钮时触发多个操作 .button 我首先需要清理每个包含 class .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() 似乎还没有完成,所以在执行某些脚本之前页面会刷新。 因此我的问题是:有没有办法只在 .eachajax 中执行所有脚本时才刷新?

实际上很少有方法。肮脏的方式。初始化一个计数变量并保持检查,如果它变为 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

将这些元素映射到请求承诺数组,以便您可以将数组传递给 Promise.all();

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

在每个外部 $.ajax.then() return 中,#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');
  });

尝试使用 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);
   }
  });
}