The ajax tutorial column introduces real-time refresh processing.
Recommendation (free): ajax tutorial (video) is
an old front-end, this case is based on jquery.
The front-end rendering page takes data, nothing more than ajax and socket. Others have not been used yet, but the project still uses ajax more.
Let's take a look at a simple request based on ajax short polling
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function req() { $.ajax({ type:'get', url:'demo.php ', dataType:'json', success: function(res) { console.log(res); }, error: function() { console.log('Request failed~'); } });
}
req();
setInterval(req, 3000);
If the network speed is fast and stable, it can be used like this, but who can determine the network speed, if the network speed is unstable, it takes 5-10 seconds to request an interface. It will cause ajax requests to accumulate and cause immeasurable problems. So how to avoid this problem?
Method 1: Assign a variable to the request, and then abort the previous request for each poll.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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 The right way, so there is the following one. Method 2: In each poll, determine whether the previous request is completed, and the next request will be executed only after completion (recommended) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 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 following && is executed. The normal writing is 1 if(isLoaded) req({"init": 0}); Another note: isLoaded=true must be added to complete, if If you add success only, if the request fails, it will not poll and request again. Complete will execute regardless of success or error. The code is here, thank you for attention~ Related free learning recommendations: javascript (video)
Come take a look at ajax real-time refresh processing
Guess you like
Origin blog.csdn.net/yy17822307852/article/details/112598512
Recommended
Ranking