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

标签 javascript jquery html ajax firefox

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

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

上收到警报

enter image description here

这只发生在 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);
}

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

最佳答案

问题是因为您每 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 攻击。

关于javascript - 连续 AJAX 调用 block 页面,Firefox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37783436/

相关文章:

javascript - 将 jquery 变量合并到一个选择器中?

Javascript - 从另一个数组列表中减去数组列表

javascript - jquery失焦时隐藏元素

CSS Noob 真的可以在布局和定位方面使用一些熟练的帮助

javascript - JS/HTML - 单页应用程序 - 取消异步操作

javascript - Angular+Jquery - 编程表单提交导致重定向

javascript - 在 Javascript 中增加 CSS padding-top 属性

javascript - 如何使翻转 div 可点击?

javascript - 如何使字段显示为文本而无需 ng-repeat 内的 HTML 代码

html - 为什么我不能将这两个图像放在 div 支架的中心?