demo的需求:用户从浏览器上传一个文件至后端,后端压缩该文件,若干秒后压缩成功后返回压缩的时间。前端有一个秒表,从上传开始计时,在压缩时间到后停止计时。
代码逻辑:先一个setInterval在上传后开始计时,再一个ajax请求等待返回压缩的时间,在收到响应数据后clearInterval
clearInterval(intervalId);
intervalId = setInterval(function() {
count += 1;
time.innerHTML = count;
}, 10)
$.ajax({
type: 'post',
url: '****',
data: {
src: "/software/MachineData/TestData/测试数据.txt"
},
xhrFields: {
withCredentials: true
},
crossDomain: true,
async: false,
dataType: "json",
success: function(data) {
clearInterval(intervalId);
},
error: function() {
alert("压缩失败");
}
效果:发现一开始计时器打死不动,简单修改后计时器在等待ajax请求完成之后才开始计时,emmm…
思考过程:ajax请求和setTimeout/setInterval都是异步执行的会在主线程代码之后执行,而且ajax的优先级比setTimeout/setInterval更高,所以就算ajax写在setTimeout/setInterval后面还是会在前面执行。这是浏览器内核的规则,所以这是没办法的吧…
方法:ajax可以实现同步模式和异步2种模式执行,所以采用异步模式去执行ajax就可以了,因此,将上述代码的async:false改为async:true。
参考博客:https://blog.csdn.net/david___/article/details/53689270