EN
JavaScript - how to make each loop iteration on async callback/response?
12 points
Using JavaScript it is posssible to write own class that helps to make async iterations on callback in following way.
Read this article to see async loop class example.
Note: this approach is useful with AJAX requests.
xxxxxxxxxx1
2
<html lang="en">3
<head>4
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>5
<script>6
7
var timer = new Timer();8
9
function Timer() {10
var t1 = new Date();11
12
this.getTime = function() {13
var t2 = new Date();14
15
return t2 - t1;16
};17
}18
19
function printMessage(message) {20
var time = timer.getTime();21
22
console.log('[' + message + ', time=' + time + ']');23
}24
25
</script>26
</head>27
<body>28
<pre id="response"></pre>29
<script>30
31
var response = document.querySelector('#response');32
33
var i = 0;34
var links = [35
'/examples/echo?text=Hello1!',36
'/examples/echo?text=Hello2!',37
'/examples/echo?text=Hello3!'38
];39
40
function makeRequest(i) {41
if(i < links.length) {42
printMessage('loop iteration ' + i);43
44
// success and error methods are callbacks of AJAX request45
46
$.ajax({47
type: 'GET',48
url: links[i],49
success: function (data) {50
response.innerText += data + '\n';51
makeRequest(i + 1); // callback for next iteration52
},53
error: function (error) {54
// in this case doing nothing breaks loop55
printMessage('loop finished');56
}57
});58
} else {59
printMessage('loop finished');60
}61
}62
63
printMessage('loop started');64
makeRequest(0);65
66
</script>67
</body>68
</html>xxxxxxxxxx1
2
<html lang="en">3
<head>4
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>5
<script>6
7
var timer = new Timer();8
9
function Timer() {10
var t1 = new Date();11
12
this.getTime = function() {13
var t2 = new Date();14
15
return t2 - t1;16
};17
}18
19
function printMessage(message) {20
var time = timer.getTime();21
22
console.log('[' + message + ', time=' + time + ']');23
}24
25
</script>26
</head>27
<body>28
<pre id="response"></pre>29
<script>30
31
var response = document.querySelector('#response');32
33
var i = 0;34
var links = [35
'/examples/echo?text=Hello1!',36
'/examples/echo?text=Hello2!',37
'/examples/echo?text=Hello3!'38
];39
40
function coverAjax(i) {41
var promise = new Promise(function(resolve, reject) {42
$.ajax({43
type: 'GET',44
url: links[i],45
success: function (data) {46
response.innerText += data + '\n';47
resolve(); // callback for next iteration48
},49
error: function (error) {50
reject(); // callback to break loop51
}52
});53
});54
55
return promise;56
}57
58
(async function() {59
printMessage('loop started');60
61
try {62
for (var i = 0; i < links.length; ++i) {63
printMessage('loop iteration ' + i);64
65
await coverAjax(i);66
}67
} catch(e) {68
console.log('[ajax error]');69
} finally {70
printMessage('loop finished');71
}72
})();73
74
</script>75
</body>76
</html>Notes:
- Promises have been introduced in ES2015.
async/awaitkeywords has been introduced in ES2017.
