jquery使用ajax实现实时刷新
对于前端渲染页面拿数据,无非就是ajax、socket,其他的暂时没有用过,但项目还是使用ajax比较多。简单的基于ajax短轮询的请求:function reqs() {$.ajax({type: 'get',url: 'demo.php',dataType: 'json',success: functi...
对于前端渲染页面拿数据,无非就是ajax、socket,其他的暂时没有用过,但项目还是使用ajax比较多。
简单的基于ajax短轮询的请求:
function reqs() {
$.ajax({
type: 'get',
url: 'demo.php',
dataType: 'json',
success: function(res) {
console.log(res);
},
error: function() {
console.log('请求失败~');
}
});
}
reqs();
setInterval(reqs, 3000);
如果网速快而稳定的话,可以这样使用,但网速谁能确定呢,如果网速不稳定的话,请求一个接口需要5~10秒,这样就会造成ajax请求堆积,近而引发不可估量的问题,那么怎样去避免这个问题呢?
方式一:给请求赋上一个变量,然后每次轮询先abort掉上一个请求
var ajaxReqs = null;
function req(isLoading) {
if(ajaxReqs !== null) {
ajaxReqs.abort();
ajaxReqs = null;
}
ajaxReqs = $.ajax({
type: 'get',
url: 'demo.php',
dataType: 'json',
beforeSend: function() {
if(isLoading) {
$('.zh-loading').show();
}
},
success: function(res) {
console.log(res);
},
complete: function() {
if(isLoading) {
$('.zh-loading').hide();
}
},
error: function() {
console.log('请求失败~');
}
});
}
req(true);
setInterval(function() {
req(false);
}, 3000);
猛一看,感觉还行,差不多就OK了,但作为前端的我们要不断的去寻找更合适的方式,所以有个下面这个。
方式二:每一次轮询都判断上一次请求是否完成,完成了才会执行下一次的请求(推荐使用)
var isLoaded = false;
function reqs(opts) {
$.ajax({
type: 'get',
url: 'demo.php',
dataType: 'json',
beforeSend: function() {
if(opts.init === 1) {
$('.zh-loading').show();
}
isLoaded = false;
},
success: function(res) {
console.log(res);
},
complete: function() {
if(opts.init === 1) {
$('.zh-loading').hide();
}
isLoaded = true;
},
error: function() {
console.log('请求失败~');
}
});
}
reqs({"init": 1});
setInterval(function() {
isLoaded && req({"init": 0});
}, 3000);
上面的isLoaded && req({"init": 0}); 表示前面一个条件正确,则执行&&后面的方法
正常的写法是
if(isLoaded) req({"init": 0});
另外注意一点:isLoaded=true要在complete里加,如果只在success里加的话, 请求失败了就不会轮询再请求了。complete不管success或error都会执行

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐
所有评论(0)