在做前端页面的时候,发现loading效果不显示;即使将loading代码放在ajax请求的前面也不行;
代码是这样的:
(function(){
mui.init();
mui.showLoading()
$('.mui-show-loading .text').html('拼命加载中...');//加载提示语
mui.ajax({
url: 'url',
type: 'post',
async: false,
data: {},
dataType: 'json',
success: function (data) {
mui.hideLoading();
}
})
})()
解决:async值换为true
原因:ajax的async设置为false时浏览器的渲染(UI)线程和js线程是互斥的,在执行js耗时操作时,页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题,但当设置为同步请求时,其他的动作(ajax函数后面的代码,还有渲染线程)都会停止下来。即使我的DOM操作语句是在发起请求的前一句,这个同步请求也会“迅速”将UI线程阻塞,不给它执行的时间。这就是代码失效的原因。