javascript - 连续 AJAX 调用 block 页面，Firefox

Question

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

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

上收到警报

这只发生在 FIREFOX 上，我在 chore 浏览器 上没有收到这样的警报

我的代码是:

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 请求，但您还在每次请求完成时启动一个新计时器。因此，您提出的请求数量呈指数增长。您应该删除 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 攻击。