layer.load方法不加载，Ajax为同步时，layer.load方法不加载
问题：Ajax为同步时，layer.load方法不加载
原因：Jquery ajax 同步阻塞引起的UI线程阻塞。浏览器的渲染(UI)线程和js线程是互斥的，在执行js耗时操作时，页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题，但当设置为同步请求时，其他的动作（ajax函数后面的代码，还有渲染线程）都会停止下来。
方法一：设置ajax为异步
方法二：使用deffer对象和$.when()
这样既可以ajax设为异步，保证了loading的正常显示，又可以保证在ajax走完再加载页面。因为$.when().done()会在deffer.resolve（）之前的代码全部走完后才走done中的代码。
上代码：
<script>
var data;
function toGetData() {
var defer = $.Deferred();
$.ajax({
url: 'xxx',
type: "post", // 请求类型
data: {},
dataType: 'json',
async: true, // 是否异步
success: function (ret) {
if (ret) {
data=ret;
defer.resolve(ret)
} else {
alert("无数据");
}
}
});
return defer;
}
$('#button').click(function(){
var index = layer.load(1);
$.when(toGetData()).done(function(ret){
//ret 为ajax请求返回的结果,可以做需要的操作
layer.close(index);
});
})
</script>
其中用到了**deferred**对象
具体内容可以看：
链接: http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html
由于ajax为同步时点击切换比较卡。能用异步最好还是用异步，用deferred对象后就可以把async换成true了。$.when()函数只接受deferred对象，所以我们在toGetData中需要先创建对象，再return就解决了。defer.resolve(ret)用于控制ajax何时结束，比如我执行完赋值操作结束ajax，进入.done()中的回调函数，它还可以把数据ret也带出来使用，这里我没有用到。所以它能保证deffer.resolve之前的代码执行完再执行回到函数，async设为true也没任何影响。
这样就完美解决了因为ajax阻塞线程导致loading层出不来的问题啦。
原文地址:https://blog.csdn.net/huanloveqiang/article/details/126346603
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_35154.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
