Question

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

为了澄清，我需要一种能够执行以下操作的方法：

用户点击以浏览/重新加载页面
JavaScript识别出这一点，并且无论进展如何，都会使脚本停在其轨道中。（我不喜欢脚本是否即将完成或者它刚刚开始）
脚本停止后，再重定向到所需的页面。

这似乎过于简单，但我无法理解。

任何帮助都将受到大力赞赏！

代码：

//  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 = "&nbsp;&nbsp;" + 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();

这可能会消除延迟。

希望这有帮助。

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

2 个答案: