js 执行一个耗时操作时，比如一个大的遍历，如何才能真正实现异步，让浏览器界面不会假死。
比如js中执行如下的循环遍历时，让浏览器不会假死状态，如何实现异步？好像可以用jquery中的Deffered方法，但不太会用。恳请各位高手给个有效的办法。
var Connect = function () {
for (var i = 1; i < 1000; i++) {
for (var j = 1; j < 1000; j++) {
for (var k = 1; k < 5000; k++) {
var b = k * 100;
}
}
}
};
方案1：针对支持html5 webworker的现代浏览器方案:。
代码1.你的大量计算，放到一个js文件中。如下：
//job.jsonmessage =function (evt){
//do massive job.在这里你进行大量耗时的计算过程。
postMessage( data );//将计算结果的数据发送会主线程
}
你的页面代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
//WEB页主线程
var worker =new Worker("job.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL
worker.postMessage('开始计算');
worker.onmessage =function(evt){//接收worker传过来的数据函数
console.log(evt.data);//输出worker发送来的数据，这里就获取到了大量计算的结果。
}
</script>
</head>
<body></body>
</html>
方案2：对于不支持WebWorker线程的浏览器。
可以考虑分批处理。即是说创造一个间隔定时器setInterval。
每隔一小段时间，处理大量数据中的一部分。
这样就可以避免大量计算导致浏览器卡死。
大致代码如下(这里是简单的例子。具体情况具体分析。)：
假设我们要计算1000万个数据的和。
var jobData = [];//假设是一个数组。里面有1000万个数据。function sliceJob(){
var num = (jobData.length / 100) + 1;//把任务数据划分为100份。
var portion = 100000;//每份有10万个数字。
var addition = 0;//这里用来保存最后的结果。一开始是0；
var intv = setInterval(function(){
if(num--){
//然后每一份结果。
additoin += every;
} else {
计算最后一份，然后输出结果。
alert('最终结果是:', addition);
window.clearInterval(intv);
}
}, 50);
}
此外。jQuery的deferred对象无法实现你的要求。
因为deferred对象的目的是为了串行处理异步过程。
但是异步过程在执行的过程中，如果耗时过长，仍然会阻塞浏览器线程，导致浏览器不可操作（卡死）。
唯一的一个例外是$.ajax。$.ajax方法也会返回一个Deferred对象。但是由于该异步过程是用的XMLHttpRequest。而xhr默认是异步执行的，相当于另起一个线程，因此不会阻塞浏览器县城。
追问谢谢了，我先研究一下再说。
追答嗯。总之正常情况下最好不要让浏览器去进行大量计算操作。
如果确实有这种要求，首先优化一下循环结构。
再考虑分段处理。让浏览器执行线程有时间缓过神来处理用户的其他输入，如鼠标点击，输入框输入等。不至于让用户感觉浏览器卡死。
另外，再问一下，jQuery中好像有个.queue方法，能否帮助用来解决我的问题呢？
追答.queue是处理动画队列的吧。jQuery没有任何解决大量数据处理的方案的。
jQuery主要是dom操作、ajax、事件这样常用的处理。
你的这种需求是没有什么通用的函数解决方案的。
使用deffered对象是一种回调函数的解决方案，在执行js代码的时候，页面实际上还是被卡住的
我觉得最靠谱的解决方案还是使用ajax请求另外一个地址，把这些操作交给后台脚本执行并返回结果，只有这样，页面才不会被阻塞（就好像动态加载分页一样，会在html上显示一个loading，但你依然可以进行其他操作，页面也不会卡住）
你如果一定要用js的话，可以参考一下nodeJS，这样js就可以在服务器端运行。。。追问
您说的很对啊，我也试了，使用deffered对象只是跟回调函数有关，页面还是被卡住的。我们现在的实际情况是，这个操作可能不能放在后台执行，因为服务端是嵌入式系统，会占用大量内存，所以还是得在前台执行，我再试着优化一下js 代码把。谢谢。
本回答被网友采纳ajax是异步调用服务端的方法，我现在这个是执行一段js代码
追答那你只能 优化你的js算法
js 执行一个耗时操作时,比如一个大的遍历,如何才能真正实现异步,让浏 ...
方案1：针对支持html5 webworker的现代浏览器方案:。代码1.你的大量计算，放到一个js文件中。如下：\/\/job.jsonmessage =function (evt){ \/\/do massive job.在这里你进行大量耗时的计算过程。 postMessage( data );\/\/将计算结果的数据发送会主线程} 你的页面代码：<!DOCTYPE HTML> \/\/WEB页主...
JS 的异步遍历,你真的会写吗?
首先，我们需要根据 tasks 数组生成对应的 promise 对象数组，然后传入到 Promise.all 方法中执行。这样，这些异步方法就会同时执行。当所有异步都执行完毕后，代码才往下执行。输出结果如下：3 秒就完事了，太强了。前面说到 forEach 底层并没有实现异步的处理，才导致阻塞失效，那么我们其实不妨实现支持...
...onclick事件只触发一次,就是我点击了一次,再次点击的时候不让...
1、用jQuery的方式 jQuery专门为此功能提供了一个函数one。这样写就能让click这个事件只执行一次。("#btn3").one('click',function(){ alert('jQuey的one函数，第1次点击');});2、不用jQuery的方式 框起来的3处都是不用jQuery实现的只触发一次的效果。核心代码是这句btn.onclick = null;就是c...
前端经典面试题(包含JS、CSS、React、浏览器等)
虚拟dom相当于在js和真实dom中间加了一个缓存,利用dom diff算法避免了没有必要的dom操作,从而提高性能。 具体实现步骤如下: 用JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中 当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差...
前端经典面试题(60道前端面试题包含JS、CSS、React、浏览器等)
具体实现步骤如下: 用JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中 当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异 把2所记录的差异应用到步骤1所构建的真正的DOM树上,视图就更新了。 结构:display:none: 会让元素...
