代码1.你的大量计算，放到一个js文件中。如下：
//job.jsonmessage =function (evt){ //do massive job.在这里你进行大量耗时的计算过程。 postMessage( data )//将计算结果的数据发送会主线程}
你的页面代码：
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/htmlcharset=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默认是异步执行的，相当于另起一个线程，因此不会阻塞浏览器县城。
//1.首先创建一个xmlHttpRequest对象function getxmlhttprequest()
{
var xmlHttpRequest
if(window.ActiveXObject)
{
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP")
}
else {
xmlHttpRequest=new XMLHttpRequest()
}
return xmlHttpRequest
}
var xmlhttp=getxmlhttprequest()
//2.定义单击按钮后触发的函数
function get()
{
if(xmlhttp)
{
var url="test.jsp"//填写请求的页面，比如test.jsp
var data="id=1 //填写发送的数据
xmlhttp.open("post",url,true)
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xmlhttp.onreadystatechange=chuli //设置获取数据后由哪个函数处理，函数名不需要括号
xmlhttp.send(data)
}
else
{
window.alert("创建失败！")
}
}
//3.定义处理数据的函数
//假设每一条数据包含两个字段：name,content，在表格中显示
function chuli()
{
if(xmlhttp.readyState==4)
{
var htmls=""
var messages=eval("("+xmlhttp.responseText+")")
for(var i=0i<messages.lengthi++)
{
htmls="<tr><td>“+messages[i].name+"</td><td>"+messages[i].content+"</td></tr>"+htmls
//拼接数据串
}
getId("message").innerHTML=getId("message").innerHTML+htmls
}
}
//4.页面内容如下：
<table id="message">
</table>
<input type="button" value=" 获取数据" onclick="get()" />
上面的test.jsp负责从数据库获取数据，并且拼接成json格式的数据，这部分我就不写了，如何拼接json，以及ajax详细的信息，推荐去看看w3School这个网站，希望对你有所帮助。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）