连续 AJAX 调用 Blocks 页面，Firefox答案

【问题标题】：Continuous AJAX call Blocks page, Firefox连续 AJAX 调用 Blocks 页面，Firefox
【发布时间】：2016-06-13 15:00:30
【问题描述】：

这是我第一次遇到这个问题。我已经多次使用 AJAX。

我正在调用 AJAX 来更新页面内容。 AJAX 调用是在每 2 秒之后。对于一些点击它可以正常工作，但之后我在 FIREFOX 浏览器

上收到警报

而且这只发生在 FIREFOX 上，我没有在 chore browser

上收到这样的警报

我的代码是：

function search_by_location (location_id) {  
    console.log(location_id);

    setInterval(function(){ 

        $.ajax({
            type:"POST",
            url: "<?php echo BASE_URL.'controller/function'?>",
            data:{"key":location_id},
            cache:false,
            success:function(data){
                $("#custom_div").html("");
                $("#custom_div").html(data);
                search_by_location (location_id);
            },
            error:function(err){
                console.log(err);
            }
        });
    }, 2000);
}

有什么问题？我认为这是因为多次点击和页面更新。是缓存相关的东西吗？

【问题讨论】：

我认为问题是因为 setinterval。因为我认为每 2000 个时间段执行相同的代码。

标签： javascript jquery html ajax firefox

【解决方案1】：

问题是因为您每 2 秒发出一次 AJAX 请求，但您还在每次请求完成时启动一个新计时器。因此，您发出的请求数量呈指数增长。您应该删除 success 处理程序中的 search_by_location() 调用：

function search_by_location (location_id) {  
    setInterval(function() { 
        $.ajax({
            type: "POST",
            url: "<?php echo BASE_URL.'controller/function'?>",
            data: { key: location_id },
            cache: false,
            success: function(data){
                $("#custom_div").html(data);
            },
            error: function(err){
                console.log(err);
            }
        });
    }, 2000);
}

另请注意，要遵循的更好模式是在成功完成请求时使用setTimeout()。当请求的完成时间超过轮询间隔时，这将停止在客户端上备份请求：

function search_by_location (location_id) {  
    $.ajax({
        type: "POST",
        url: "<?php echo BASE_URL.'controller/function'?>",
        data: { key: location_id },
        cache: false,
        success: function(data){
            $("#custom_div").html(data);
        },
        error: function(err){
            console.log(err);
        },
        complete: function() {
            setTimeout(function() {
                search_by_location(location_id);
            }, 2000);
        }
    });
}

如果您要求客户端始终能够立即访问最新数据，您可能还想考虑使用 websockets。如果您不小心，轮询模式最终可能会导致您自己的服务器受到 DDoS 攻击。

【讨论】：