jQuery在頁面卸載時打破每個循環

Question

我有一個jQuery每個循環都有一個ajax函數，但是當我在循環仍在運行時試圖離開這個頁面時我遇到了一個問題，基本上我無法導航到任何其他頁面，除非每個循環都已完成。

我不需要這個循環來完成，因為它基本上只需要作為一個視覺指示器，它遠沒有犧牲用戶體驗那么重要。

    $.each( get_link, function( i, val ) {

    $(window).on("beforeunload", function() {
        return false;
    });

    $.ajax({
        type: "POST",
        url: url,
        async: true,
        data: {url: val},
        success: function(data)
        {
            let row = $("#status[data-url='" + val + "']");
            row.html(data);
            $("#loader[data-url='" + val + "']").removeClass("loader vertical-align-middle loader-bounce");
        }
    });
});

你可以看到我試圖用$(window).on("beforeunload")修復它，但beforeunload創建了一個不必要的警報窗口，遺憾的是我找不到禁用的方法。

編輯：上面的代碼也沒有破壞循環...

被beforeunload一個好主意？ 也許有更好的方法來打破頁面退出循環？

f.khantsis建議中止ajax操作，這是一個好主意，但它沒有幫助，因為我在5-6個鍵的數組上運行每個循環。 因此，如果其中一個被中止，則循環繼續運行所有剩余的鍵。

Answer 1

請參閱使用jQuery中止Ajax請求

基本上， jQuery.ajax返回一個jqXHR對象，該對象可用於中止掛起的請求。

$.each( get_link, function( i, val ) {

    var xhr = $.ajax({
      type: "POST",
      url: url,
      async: true,
      data: {url: val},
      success: function(data)
      {
          let row = $("#status[data-url='" + val + "']");
          row.html(data);
          $("#loader[data-url='" + val + "']").removeClass("loader vertical-align-middle loader-bounce");
      }
    });
    $(window).on("beforeunload", function() {
      xhr.abort();
    });
});

Answer 2

$(window).on("beforeunload")應該在你的循環之外。

然后它可以設置一個全局變量，然后在循環中檢查它，例如：

var leavingThePage = false;

$(window).on("beforeunload", function() {
        leavingThePage = true;
});

$.each( get_link, function( i, val ) {
    if (leavingThePage)
        return false;

    $.ajax({
      ... Do ajax stuff ...
    });
});