有一个ajax因为业务需求必须是同步的,不过ajax结果返回前,因为UI线程和JS线程互斥页面会卡死一短时间,求决绝方案。这里简单写了一个小demo演示一下原理
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="button" onclick="console.log('1')">按钮<button>
</body>
</html>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
var fn1 = function(content){
var t1 = new Date().getTime()
console.log("fn1: " + "开始" );
while(new Date().getTime()-t1 < 10000){
}
console.log("fn1: " + "结束" );
}
fn1();
</script>
在这个demo里,页面打印“开始”和“结束”期间按钮要可以输出 “1”,请问有解决方案吗?
首先
这个限定本身应该是可以去掉的,没人会让用户的页面卡着不动导致用户很不爽然后关掉你的网页再也不想开这个网站。同步可以用回调解决,不妨说说你为什么等
ajax
结果的时候要阻塞整个线程,该不会是你不知道可以写个回调然后自己用while
轮询了吧?然后,如果一定要在给定的限制下实现“输出1”,就得在你阻塞整个线程的地方添加代码,允许执行其它代码,相当于自己实现一个非常小的调度算法。鉴于浏览器里没有类似
sleep
的函数,你的“同步”我可以肯定是用循环实现的,即轮询或忙等待,这样不仅用户体验极差,还会占满一个CPU核心。如果不改掉这个循环,为了达到目的,就得每趟循环都额外查看是否有新任务可以执行,有则取出一个任务执行,然后继续循环。你大概是想显示进度条吧,那就直接在循环里更新进度就行了,边检查ajax
是否完成边更新进度。但最好的方法就是去掉你这个奇怪的限制,需要你提供跟你业务相关的信息。