js 执行一个耗时操作时,比如一个大的遍历,如何才能真正实现异步,让浏览器界面不会假死。

比如js中执行如下的循环遍历时,让浏览器不会假死状态,如何实现异步?好像可以用jquery中的Deffered方法,但不太会用。恳请各位高手给个有效的办法。varConn... 比如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;
}
}
}
};
展开
 我来答
cainiaokan
2014-11-11 · TA获得超过2917个赞
知道小有建树答主
回答量:651
采纳率:66%
帮助的人:612万
展开全部

方案1:针对支持html5 webworker的现代浏览器方案:。


代码1.你的大量计算,放到一个js文件中。如下:

//job.js
onmessage =function (evt){
  //do massive job.在这里你进行大量耗时的计算过程。
  postMessage( data );//将计算结果的数据发送会主线程
}


你的页面代码:

<!DOCTYPE HTML>
<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默认是异步执行的,相当于另起一个线程,因此不会阻塞浏览器县城。

更多追问追答
追问
谢谢了,我先研究一下再说。
追答
嗯。总之正常情况下最好不要让浏览器去进行大量计算操作。

如果确实有这种要求,首先优化一下循环结构。
再考虑分段处理。让浏览器执行线程有时间缓过神来处理用户的其他输入,如鼠标点击,输入框输入等。不至于让用户感觉浏览器卡死。
xiii130
2014-11-11 · 知道合伙人软件行家
xiii130
知道合伙人软件行家
采纳数:817 获赞数:2867
爱好编程,在工作中积累了比较丰富的经验。愿与大家共同进步。

向TA提问 私信TA
展开全部
按我个人的理解
使用deffered对象是一种回调函数的解决方案,在执行js代码的时候,页面实际上还是被卡住的

我觉得最靠谱的解决方案还是使用ajax请求另外一个地址,把这些操作交给后台脚本执行并返回结果,只有这样,页面才不会被阻塞(就好像动态加载分页一样,会在html上显示一个loading,但你依然可以进行其他操作,页面也不会卡住)

你如果一定要用js的话,可以参考一下nodeJS,这样js就可以在服务器端运行。。。
追问
您说的很对啊,我也试了,使用deffered对象只是跟回调函数有关,页面还是被卡住的。我们现在的实际情况是,这个操作可能不能放在后台执行,因为服务端是嵌入式系统,会占用大量内存,所以还是得在前台执行,我再试着优化一下js 代码把。谢谢。
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
zhangqi0192
2014-11-11 · TA获得超过2388个赞
知道大有可为答主
回答量:1417
采纳率:0%
帮助的人:1227万
展开全部
使用 ajax技术 异步处理 enecy=true
追问
ajax是异步调用服务端的方法,我现在这个是执行一段js代码
追答
那你只能 优化你的js算法
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式