Ajax real-time refresh processing method

As an old front-end, this case is written based on jquery.

The front-end rendering page uses nothing more than ajax and socket to get data. The others have not been used for the time being, but the project still uses ajax more.

Let’s take a look at a simple request based on ajax short polling

function req() {
    $.ajax({
        type: 'get',
        url: 'demo.php',
        dataType: 'json',
        success: function(res) {
            console.log(res);
        },
        error: function() {
            console.log('请求失败~');
        }
    });
}
req();
setInterval(req, 3000);

If the network speed is fast and stable, you can use it like this, but who can determine the network speed? If the network speed is not If it is stable, it will take 5 to 10 seconds to request an interface. This will cause ajax requests to accumulate, which will soon cause immeasurable problems. So how to avoid this problem?

Method 1: Assign a variable to the request, and then abort the previous request each time it is polled

var ajaxReq = null;
function req(isLoading) {
    if(ajaxReq !== null) {
        ajaxReq.abort();
        ajaxReq = null;
    }
    ajaxReq = $.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);

At first glance, it feels okay, almost OK, but as a front-end We have to constantly look for more suitable ways, so here is the one below.

Method 2: Each polling will determine whether the previous request is completed, and the next request will be executed only after it is completed (recommended)

var isLoaded = false;
function req(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('请求失败~');
        }
    });
}
req({"init": 1});
setInterval(function() {
    isLoaded && req({"init": 0});
}, 3000);

## above #isLoaded && req({"init": 0}); means that the previous condition is correct, then the method after && will be executed.

The normal writing method is

if(isLoaded) req({"init": 0});

Another note:

isLoaded=true It needs to be added in complete. If it is only added in success, if the request fails, it will not be polled and requested again. complete will be executed regardless of success or error.

That’s it. Thank you for attention~

The above is the detailed content of Ajax real-time refresh processing method. For more information, please follow other related articles on the PHP Chinese website!