要求:请求5次ajax,将结果依次显示在页面
老办法:用数组+定时器代替for循环
function getTime(j, length) {
setTimeout(function () {
$start = new Date().getTime();
$.get(seturl, function (e) {
$end = new Date().getTime();
//js请求时间
//计算出相差天数
$date = $end - $start;
$seconds = Math.ceil($date / (1000));
$last = $seconds - e['time'];
console.log($seconds);
$html = $('<li>' + j + ' test1: ' + e["time"] + 's' + ' / test2: ' + $last + 's</li>');
$html.appendTo($('.list'));
//成功后,判断是否要接着执行
if (++j < length) {
getTime(j, length);
}
if (j == 6) {
//loading end
$('#loading').hide();
}
}, 'json').error(function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
})
}, Math.random() * 3000);
}
getTime(1, 6);
新办法:ES6 async await
```
async function getTime() {
for (var i = 1; i <6 ; i++) {
await Time(i);
}
}
function Time(j) {
$start = new Date().getTime();
$.get(seturl, function (e) {
$end = new Date().getTime();
//js请求时间
//计算出相差天数
$date = $end - $start;
$seconds = Math.ceil($date / (1000));
$last = $seconds - e['time'];
//显示在页面上
$html = $('<li>' + j + ' test1: ' + e["time"] + 's' + ' / test2: ' + $last + 's</li>');
$html.appendTo($('.list'));
if (j == 5) {
// loading end
$('#loading').hide();
}
}, 'json').error(function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
})
}
getTime();
```
原文地址:https://www.cnblogs.com/gggggggxin/p/11526694.html
时间: 2024-10-22 09:44:48