javascript - 在加载新页面之前停止 js 循环

Question

我有一个 JavaScript 循环，用于检查数据库表中是否有新消息进来。这可以处理 AJAX 请求，并且工作正常。每当我尝试导航到另一个页面(仅在 Chrome 中)时，就会出现问题。页面挂起，几乎就像页面在重定向/重新加载之前等待脚本完成一样。我需要一种可以在卸载或重新加载页面时停止脚本运行的方法。我尝试过使用 jQuery 的 onbeforeunload 函数并将其绑定(bind)到 $(window) ，但问题仍然很明显。我不确定在哪里/尝试什么。经过谷歌搜索后，我所能找到的只是完全停止页面重定向的方法，除非在确认窗口中单击"is"。这不是我需要的。

为了澄清，我需要一个可以执行以下操作的方法:

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 处理程序。