在另一个 ajax 调用 jquery 上停止 AJAX 作业

Question

我正在尝试制作一些内容不断刷新的 ajax 标签。 该应用程序正在 django 1.11 上运行，因此，每个 ajax 调用都有 CSRF 脚本（如果您不熟悉，可以跳过它）

第 1 步：

通过 AJAX 调用标签内容

$('#{{ chat_friend.profile_company_user_uuid }}').click(function () {

    $.ajax({

        beforeSend: function (xhr, settings) {

            function getCookie(name) {

                var cookieValue = null;
                if (document.cookie && document.cookie != '') {
                    var cookies = document.cookie.split(';');
                    for (var i = 0; i < cookies.length; i++) {
                        var cookie = jQuery.trim(cookies[i]);
                        // Does this cookie string begin with the name we want?
                        if (cookie.substring(0, name.length + 1) == (name + '=')) {
                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                            break;
                        }
                    }
                }
                return cookieValue;
            }

            if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
                // Only send the token to relative URLs i.e. locally.
                xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
            }
        },

        type: "POST",
        url: "/chat/view/",
        data: {
            id: "{{ chat_friend.profile_company_user_uuid }}", // < note use of 'this' here
            access_token: $("#access_token").val()
        },
        success: function (data) {
            $('#chat-message').html(data);
        }
    });

})
;

完成！

第 2 步：

按间隔调用 AJAX REFRESH

setInterval(function () {

    $.ajax({
        beforeSend: function (xhr, settings) {
            function getCookie(name) {
                var cookieValue = null;
                if (document.cookie && document.cookie != '') {
                    var cookies = document.cookie.split(';');
                    for (var i = 0; i < cookies.length; i++) {
                        var cookie = jQuery.trim(cookies[i]);
                        // Does this cookie string begin with the name we want?
                        if (cookie.substring(0, name.length + 1) == (name + '=')) {
                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                            break;
                        }
                    }
                }
                return cookieValue;
            }

            if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
                // Only send the token to relative URLs i.e. locally.
                xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
            }
        },
        type: "POST",
        url: "/chat/refresh/",
        data: {
            id: "{{ opponent.profile_company_user_uuid }}", // < note use of 'this' here
            access_token: $("#access_token").val()
        },
        success: function (data) {
            $('#inner-chat').html(data);
        }
    });
}, 5000);

完成

但是，当我调用另一个选项卡的 AJAX 时，不会删除刷新代码，而是变为 2（或更多，取决于您切换选项卡的次数）

Answer 1

在附加的代码中，我找不到它发生的原因，但这一定是因为您的 setInterval 函数在每次选项卡单击时都会再次调用。您可以尝试为每个选项卡单击清除一次该间隔。像这样修改你的代码：

var timer = setInterval(/*your refresh-ajax here*/);

并在您的 tab-click-ajax 中清除该间隔。

success: function (data) {
  clearInterval(timer);
  $('#chat-message').html(data);
}

如果这没有帮助，请告诉我。

编辑

假设 refresh-script 在 tab-ajax 响应中，它直接附加到 html，我认为这会导致问题。每次添加新的<script> 时都会执行。这就是为什么您的刷新功能多次触发的原因。我以一种非常简单的方式模仿了这种行为，一种可能的解决方案是修改我以前的代码：

timer = setInterval(/*your refresh-ajax here*/); //without var

尝试将var timer; 声明为<script> 内的全局变量，该变量始终存在于页面上。这有助于我进行简单的模仿。

另一种方法是将clearInterval(timer); 从success: 移动到setInterval 之前的新脚本，但这没有区别。无论如何，定时器必须是全局的。