jquery使用ajax实现实时刷新

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