在加載新頁面之前停止js循環

Question

我有一個JavaScript循環，它在進入時檢查數據庫表中的新消息。這可以避免AJAX請求，並且工作正常。每當我嘗試導航到其他頁面時，都會出現問題（僅在Chrome中）。頁面掛起，就好像頁面正在等待腳本在重定向/重新加載之前完成一樣。我需要一種方法，可以在頁面卸載或重新加載時停止腳本的運行。我嘗試過使用jQuery的onbeforeunload函數並將其綁定到$(window)，但問題仍然很明顯。我不確定在哪裏/要嘗試什麼。谷歌搜索後，我能找到的所有方法都是停止頁面重定向，除非在確認窗口中單擊「是」。這不是我需要的。

只是爲了澄清，我需要一個會做的方法如下：

1. 用戶點擊即可離開/重新加載頁面
2. 的JavaScript確定這一點，並停止腳本死在它的軌道，無論進展。 （我不是說劇本即將完成還是剛剛開始）
3. 腳本一旦停止，然後重定向到所需的頁面。

看來這樣做過於簡單，但我無法弄清楚。

任何幫助將大力讚賞！

代碼：

// Document Ready that will initiate the loop. 
$(document).ready(function() { 
    // Notification System Start 
    var onLoadMsgs = document.getElementById("currentNotifs").value; 
    getRedMsgUpdates(onLoadMsgs, true); 
    // Notification System End 
}); 

// AJAX Function that will get the # of msgs 
function getRedMsgUpdates() { 
var pageDetect = document.URL.indexOf("job.php"); 
var self  = this; 
var results  = {}; 
var updateUrl = "/includes/record_count.php"; 

$.ajax({ 
    method: 'GET', 
    cache: false, 
    url: updateUrl, 
    datatype: 'text', 
    data: { 
    }, 
    success:function(redResponse){ 
     if(redResponse == 0) { 
      var redResponse = "  " + redResponse; 
     } else if (redResponse >= 1 && redResponse <= 9) { 
      var redResponse = "&nbsp;&nbsp;" + redResponse; 
     } else if (redResponse >= 10 && redResponse <= 99) { 
      var redResponse = redResponse; 
     } else if (redResponse >= 100) { 
      var redResponse = "99+"; 
     } else { 
      var redResponse = "ERR"; 
     } 

     document.getElementById('secoNotifsNum').innerHTML = redResponse; 
     if(redResponse == "&nbsp;&nbsp;" + 1 && pageDetect == "41") { 
      document.getElementById('redBarText').innerHTML = '<a target="_blank" href="/includes/Messages.php">' + redResponse + ' Emergency Message Outstanding</a>'; 
     } else if(redResponse == "&nbsp;&nbsp;" + 1) { 
      document.getElementById('redBarText').innerHTML = '<a href="/includes/Messages.php">' + redResponse + ' Emergency Message Outstanding</a>'; 
     } else if(redResponse != "&nbsp;&nbsp;" + 1 && pageDetect == "41") { 
      document.getElementById('redBarText').innerHTML = '<a target="_blank" href="/includes/Messages.php">' + redResponse + ' Emergency Messages Outstanding</a>'; 
     } else if(redResponse != "&nbsp;&nbsp;" + 1) { 
      document.getElementById('redBarText').innerHTML = '<a target="_blank" href="/includes/Messages.php">' + redResponse + ' Emergency Messages Outstanding</a>'; 
     } 

     flashRedBackground(redResponse); 
    } 
}); 
timeout1 = setTimeout(function() {getRedMsgUpdates();}, 2000); 
} 

// Function that will make the notification Bar/Circle flash 
function flashRedBackground(msgs) { 
    var audio = new Audio('/js/audio/siren1.wav'); 
    if(msgs != "&nbsp;&nbsp;" + 0) { 
     // Flash Background 
     $("#notificationRedFull").show(); 
     $("#notificationRedFull").css("opacity", "1"); 
     $("#notificationRedFull").fadeOut(1000).fadeIn(1000).fadeOut(1000).fadeIn(1000).fadeOut(1000).fadeIn(1000); 
     $("#notificationBarRed").css("opacity", "1"); 
     $("#notificationBarRed").fadeOut(1000).fadeIn(1000).fadeOut(1000).fadeIn(1000).fadeOut(1000).fadeIn(1000); 
     audio.play(); 
    } else if(msgs == "&nbsp;&nbsp;" + 0) { 
     // Ensure Notification Not Shown 
     $("#notificationRedFull").hide(); 
     $("#notificationRedFull").css("opacity", "0"); 
     $("#notificationBarRed").css("display", "none"); 
    } 
} 

Answer 1

$(window).on('beforeunload', function(){ clearTimeout(timeout1); }); 

而且我會移動你setTimeout到ajax.complete處理程序。

Answer 2

你可以嘗試，並指定Ajax請求給一個變量，並使用中止請求以下

request.abort(); 

這可能擺脫延遲。

希望這會有所幫助。