jquery使用ajax实现实时刷新

来源：互联网发布：汽车悬挂设计软件编辑：程序博客网时间：2024/05/16 08:27

对于前端渲染页面拿数据，无非就是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都会执行

阅读全文

1 0