Stopping a js loop before loading new page

Question

I have a JavaScript loop that checks a database table for new messages as they come in. This works off an AJAX request, and is working fine. My problem arises whenever I try to navigate to another page (Only in Chrome). The page hangs, almost as though the page is waiting for the script to complete before redirecting/reloading. I require a way that I can stop the script running when the page is unloaded or reloaded. I have tried using jQuery's onbeforeunload function and binding it to $(window), but the problem is still apparent. I'm not sure where/what to try. After a google search, all I can find are methods to stop the page redirecting altogether unless "Yes" is clicked in a confirm window. This is not what I need.

Just to clarify, I need a method that will do the following:

User clicks to navigate away/reload the page
JavaScript identifies this and stops the script dead in it's tracks, regardless of progress. (I'm not fussed whether the script is about to complete or it has just started)
Once the script has been stopped, then redirect to the desired page.

It seems like this is overly simple to do, but i can't figure it out.

Any help will be massively appreciated!

Code:

//  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");
    }
}

Igor · Accepted Answer · 2015-10-11 15:20:05Z

1

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

And I would move your setTimeout to ajax.complete handler.

answered Oct 11, 2015 at 15:20

Igor

15.9k1 gold badge29 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Darren Hall · Accepted Answer · 2015-10-11 15:03:36Z

0

You could try and assign the ajax request to a variable and abort the request using the following

request.abort();

This might get rid of the delay.

Hope this helps.

answered Oct 11, 2015 at 15:03

Darren Hall

9688 silver badges13 bronze badges

1 Comment

Scott Thornton Over a year ago

Thanks for the input, but I think putting the AJAX would over-complicate my code. I'm a little OCD when it comes to clean, organised code.. I actually sacked a guy this week because his code was all over the place, well it was terrible all-round, but hey ho. Appreciate the answer though.

Collectives™ on Stack Overflow

Stopping a js loop before loading new page

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related