0

I have an AJAX function I'd like to kill, but it is outside of the function. Take a look:

function waitForMsg(){

       var heartbeat = $.ajax({
            type: "GET",
            url: "includes/push_events.php",
            tryCount : 0,
            retryLimit : 3,
            async: true,
            cache: false,
            // timeout: 500,

            success: function(data){ 
                console.log(data);
                if(data){
                    if(data.current_date_time){
                        updateTime(data.current_date_time);
                    }
                    if(data.color){
                        console.log("Receiving data");
                        displayAlert(data.color, data.notification_message, data.sound, data.title);
                    }
                    if(data.user_disabled){
                        console.log("Receiving data");
                        fastLogoff();
                        checkDisabled();
                    }       

                }
                setTimeout(
                    waitForMsg,
                    5000 
                );
            },


            error: function(data){
                if (data.status == 500) {
                    console.log("Connection Lost to Server (500)");
                        $.ajax(this);
                } else {
                    console.log("Unknown Error. (Reload)");
                        $.ajax(this);
                }

            },

            dataType: "json"

        });
    };

    // Detect browser open.


    $(document).ready(function(){

        // window.onunload = function(){alert('closing')};

        // mainmode();

        $('#alertbox').click(function(){
                $('#alertbox').slideUp("slow");
        });

        $(document).ready(function(){


    $('#alertbox').click(function(){
            $('#alertbox').slideUp("slow");
    });


    // Check focal point
    var window_focus = true;


           $(window).focus(function() {
                window_focus = true;
                console.log('Focus');
            });

            $(window).blur(function() {
                window_focus = false;
                console.log('Blur');
            });


    setInterval(function(){
        if(window_focus == true){
            console.log('in focus');
            waitForMsg();
        }else{
            console.log('out of focus');
            heartbeat.abort();
        }

    }, 5000);
});




    });

If you notice, the ajax is outside of the document.ready. I am trying to kill the ajax calls if the user goes to a different window, then restart the calls once the return to the window. The start works, but if the user goes away from the window, it gives me the "heartbeat is not defined". Obviously this is because its outside of that function. Any work arounds?

4

2 回答 2

1

我会重构一些代码以避免使用setInterval和清理代码。

您可以抽象对象中的逻辑，比如说Request. 您可以添加两个方法来resume处理stop底层 AJAX 请求的状态。

var Request = function(options){
    var request = this, xhr = null, aborted = false;

    /* Resumes the operation.
     * Starts a new request if there's none running.
     */
    request.resume = function() {
        aborted = false;
        request.retry();
    };

    /* Retry loop.
     */
    request.retry = function(){
        if(!xhr) {
            xhr = $.ajax(options).done(function(){
                request.destroy();
                !aborted && setTimeout(function(){
                    request.retry();
                }, options.timeout);
            });
        }
    };

    /* Aborts the current operation.
     */
    request.abort = function(){
        aborted = true;
        if(xhr) xhr.abort();
        request.destroy();
    };

    /* Destroy.
     */
    request.destroy = function(){
        xhr = null;
    };

    return request;
};

现在，您可以删除setInterval.

$(function () {
    var request = new Request({
        type: "GET",
        url: "includes/push_events.php",
        timeout: 5000,
        success: function(data){ 
            /* Success handler */
        },
        error: function(data){
            /* Error handler */
        },
        dataType: "json"
    });

    $(window).focus(function () {
        request.resume();
    }).blur(function () {
        request.abort();
    });

    request.resume();
});

Request构造函数接收$.ajax应该包含一个附加参数的选项，该参数timeout指定请求之间的延迟。

于 2013-03-13T18:49:24.447 回答
0

您需要在 window.blur 之后停止进一步的请求。在 window.focus 之后重新启动请求。

修改后的代码

var setTimeoutConst;
function waitForMsg(){
        if(!window_focus){
             return; //this will stop further ajax request
        }
       var heartbeat = $.ajax({
            type: "GET",
            url: "includes/push_events.php",
            tryCount : 0,
            retryLimit : 3,
            async: true,
            cache: false,
            // timeout: 500,

            success: function(data){ 
                console.log(data);
                if(data){
                    if(data.current_date_time){
                        updateTime(data.current_date_time);
                    }
                    if(data.color){
                        console.log("Receiving data");
                        displayAlert(data.color, data.notification_message, data.sound, data.title);
                    }
                    if(data.user_disabled){
                        console.log("Receiving data");
                        fastLogoff();
                        checkDisabled();
                    }       

                }
                setTimeoutConst= setTimeout(waitForMsg,5000);
            },
            error: function(data){
                if (data.status == 500) {
                    console.log("Connection Lost to Server (500)");
                       // $.ajax(this);
                } else {
                    console.log("Unknown Error. (Reload)");
                        //$.ajax(this);
                }
                setTimeoutConst= setTimeout(waitForMsg,5000); // continue sending request event if last request fail
            },
            dataType: "json"

        });
    };

var window_focus = true;
$(document).ready(function(){

    $('#alertbox').click(function(){
        $('#alertbox').slideUp("slow");
    });

    $('#alertbox').click(function(){
            $('#alertbox').slideUp("slow");
    });
    // Check focal point
     $(window).focus(function() {
        if(window_focus ){return}
        window_focus = true;
        waitForMsg(); 
        console.log('Focus');
    });
   $(window).blur(function() {
          if(!window_focus ){return}
        clearTimeout(setTimeoutConst);
        window_focus = false;
        console.log('Blur');
    });

    waitForMsg();            
});
于 2013-03-13T18:33:07.577 回答