Question

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

我正在调用AJAX来更新页面内容。 AJAX呼叫每2秒后调用一次。对于一些Hits它正常工作，但之后我正在关注 FIREFOX浏览器

这只发生在 FIREFOX 上，我没有在家务浏览器

上收到这样的警告

我的代码是：

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

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

Answer 1

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

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。

连续的AJAX调用阻止页面，Firefox

1 个答案: