本文主要是介绍使用Web Workers处理线程,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
Web Workers 是在HTML 5中新增的。通过Web Workers可以将耗时较长的处理交给后台线程去运行。
1、HTML 4中关于求和运算的示例代码:
<!DOCTYPE <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script type="text/javascript">function calculate(){var num = parseInt(document.getElementById('num').value, 10)var result = 0for(var i = 0; i <= num; i++) {result += i;}alert('合计值为' + result + '。')}</script>
</head>
<body><h1>从1到给定数值的求和示例</h1>输入数值:<input type="text" id="num"><button onclick="calculate()">计算</button>
</body>
</html>
当文本输入框输入比较大的数值时,浏览器会跳出脚本运行时间过长的对话框,并且用户不能对页面进行任何操作。
2、在HTML 5中,使用WebWorkers API让耗时较长的运算在后台运行
<!DOCTYPE <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script type="text/javascript">var worker = new Worker('SumCalculate.js')worker.onmessage = function(event){alert('合计值为' + event.data + '。')}function calculate(){var num = parseInt(document.getElementById('num').value, 10)worker.postMessage(num)}</script>
</head>
<body><h1>从1到给定数值的求和示例</h1>输入数值:<input type="text" id="num"><button onclick="calculate()">计算</button>
</body>
</html>
SumCalculate.js脚本:
onmessage = function(event)
{var num = event.datavar result = 0for(var i = 0; i <= num; i++)result += ipostMessage(result)
}
注:在Firefox下进行测试
本文摘自《HTML5权威指南》
这篇关于使用Web Workers处理线程的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!