layer.load方法不加载,Ajax为同步时,layer.load方法不加载

layer.load方法不加载,Ajax为同步时,layer.load方法不加载

问题:Ajax为同步时,layer.load方法不加载
原因:Jquery ajax 同步阻塞引起的UI线程阻塞。浏览器的渲染(UI)线程和js线程是互斥的,在执行js耗时操作时,页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题,但当设置为同步请求时,其他的动作(ajax函数后面的代码,还有渲染线程)都会停止下来。

方法一:设置ajax为异步

async:false

方法二:使用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层出不来的问题啦。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要将 jqGrid 中的 loading 改为 layui.loading 并居中加载,可以按照以下步骤进行操作: 1. 在页面引入 layui 的样式文件和 js 文件。 ```html <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/css/layui.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.min.js"></script> ``` 2. 定义一个方法,用于显示 layui 的 loading。 ```javascript function showLoading() { var loading = layui.layer.load(2, { shade: [0.3, '#333'] }); return loading; } ``` 该方法中,`layui.layer.load()` 方法用于显示 loading,参数 2 表示显示类型为转圈加文字,`shade` 参数表示遮罩层颜色和透明度。 3. 在 jqGrid 加载数据前显示 loading,加载完成后隐藏 loading。 ```javascript // 在 jqGrid 加载数据前显示 loading $("#grid").jqGrid({ ... loadBeforeSend: function(xhr, settings) { var loading = showLoading(); $(this).data("loading", loading); // 将 loading 对象存储在 jqGrid 中 }, ... }); // 加载完成后隐藏 loading $("#grid").jqGrid({ ... loadComplete: function(data) { var loading = $(this).data("loading"); layui.layer.close(loading); }, ... }); ``` 在 `loadBeforeSend` 回调函数中,调用 `showLoading` 方法显示 loading,并将 loading 对象存储在 jqGrid 中。在 `loadComplete` 回调函数中,通过 `$(this).data("loading")` 获取存储的 loading 对象,并调用 `layui.layer.close` 方法隐藏 loading。 4. 居中显示 loading。 ```css #layui-layer2 { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 通过给 loading 所在的 div(id 为 `layui-layer2`)设置样式,使其在页面居中显示。 以上就是将 jqGrid 中的 loading 改为 layui.loading 并居中加载的步骤。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值