ajax实时刷新处理
作为一个老前端,本案例是基于jquery来写的。 前端渲染页面拿数据,无非就是ajax、socket,其他的暂时没有用过,但项目还是使用ajax比较多。 下面来看一下一个简单基于ajax短轮询的请求 function req() { $.ajax({ type: 'get',url: 'demo.php',dataType: 'json',success: function(res) { console.log(res); },error: function() { console.log('请求失败~'); } }); } req(); setInterval(req,3000); 如果网速快而稳定的话,可以这样使用,但网速谁能确定呢,如果网速不稳定的话,请求一个接口需要5~10秒,这样就会造成ajax请求堆积,近而引发不可估量的问题,那么怎样去避免这个问题呢? 方式一:给请求赋上一个变量,然后每次轮询先abort掉上一个请求 var ajaxReq = null; function req(isLoading) { if(ajaxReq !== null) { ajaxReq.abort(); ajaxReq = null; } ajaxReq = $.ajax({ type: 'get',beforeSend: function() { if(isLoading) { $('.zh-loading').show(); } },complete: function() { if(isLoading) { $('.zh-loading').hide(); } },error: function() { console.log('请求失败~'); } }); } req(true); setInterval(function() { req(false); },3000); 猛一看,感觉还行,差不多就OK了,但作为前端的我们要不断的去寻找更合适的方式,所以有个下面这个。 方式二:每一次轮询都判断上一次请求是否完成,完成了才会执行下一次的请求(推荐) var isLoaded = false; function req(opts) { $.ajax({ type: 'get',beforeSend: function() { if(opts.init === 1) { $('.zh-loading').show(); } isLoaded = false; },complete: function() { if(opts.init === 1) { $('.zh-loading').hide(); } isLoaded = true; },error: function() { console.log('请求失败~'); } }); } req({"init": 1}); setInterval(function() { isLoaded && req({"init": 0}); },3000); 上面的 正常的写法是 if(isLoaded) req({"init": 0}); 另外注意一点: 代码就到这里了,thank you for attention~
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |