这是我第一次遇到这个问题。我多次使用 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);
}
问题是什么?我认为这是因为多次点击和页面更新。是缓存相关的东西吗?
最佳答案
问题是因为您每 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/