html5中的多线程
2017-01-10 本文已影响0人
Victor细节
这里只写了代码，想了解更多请点击 了解多线程
主线程
<body>
<input type="button" value="点击我" id="box"/>
<input type="button" value="停止子线程的耗时操作" id="stop1"/>
<h1 id="num"></h1>
<script type="text/javascript">
//创建一个worker对象（创建一个子线程）
var webworker;
if (typeof Worker != "undefined") {
// 参数是耗时操作的功能
webworker = new Worker("./webworker.js");
//监听子线程中运行的耗时操作，如果运行完毕，
//回调到这里（主线程）更新UI代码
webworker.onmessage = function (e) {
//主线程更新UI
num.innerHTML = e.data;
}
} else {
throw new Error("不支持Worker对象！");
}
box.onclick = function () {
alert("哈哈哈哈哈哈");
}
//可以手动停止子线程的耗时操作
stop1.onclick = function (){
webworker.terminate();
}
</script>
</body>
子线程---(webworker.js)
(function () {
//在子线程中 模拟一个耗时操作
for (var i = 0; i < 10000000000; i++) {}
//耗时操作运行完毕后，调用postMessage方法回到主线程，
//并且把数据传过去
postMessage(i);
})();
