Javascript 在原始函数之外终止Ajax会话

我有一个AJAX函数，我想终止它，但它不在函数的范围之内。看一看:

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




    });

---

如果您注意到，ajax在document.ready之外。如果用户转到另一个窗口，我试图终止ajax调用，然后在返回窗口后重新启动调用。开始工作，但如果用户离开窗口，它会给我“心跳未定义”。显然，这是因为它超出了这个功能。有什么解决办法吗？

您需要在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();            
});

---

我会重构一点代码，以避免使用

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

参数，该参数指定请求之间的延迟。

去掉

var

关键字，该变量将是一个全局变量。@Barmar尝试了这个。。继续运行ajax。您所说的“…另一个窗口…”是什么意思？@Alexander如果用户打开了几个选项卡，并且他们导航到另一个选项卡的时间过长，我想终止ajax调用。。当用户返回到我的站点时，重新激活ajax调用。@greycode，这看起来很有效！我删除了waitforMsg（）；在window.focus下，它不会调用两次：）如果用户单击其他位置，然后返回站点，它会开始调用ajax两次。如果他们再次这样做，它将添加另一个ajax调用waitforMsg（）；是的，你是对的，所以在模糊上你需要清除settimeout。添加了ClearTimeOutOK，这就消除了添加，但是一次单击离开，然后单击返回，会调用waitformsg（）两次。不，它将仅从内部窗口调用聚焦方法Alexander，看起来非常强大！你能不能把你的代码和我的代码进一步连接起来？AJAX对我来说还是一种新鲜事物，您上面编写的代码似乎有点混乱。如果你能的话，我会很感激的。也许我很守旧，但是

request=undefined看起来完全错了。我知道它可以工作，但是
request=null或
请求=false似乎更符合逻辑。所有的测试都是错误的，所以测试可以是
如果（请求）.
@beetrootbeetroot你能回答吗？@beetrootbeetroot，同意。我更喜欢使用
null
though@Alexander这很好用，看起来更容易使用。唯一的问题是“模糊ajax杀手”部分不起作用。看起来还在运行。