码迷,mamicode.com
首页 > 编程语言 > 详细

Worker 实现 js 多线程

时间:2016-04-19 00:09:14      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:

有以下情景: 使用js 求 10000 之内的 质数,并把这些质数全部显示在 页面上

不使用 Worker 的写法:

 1 <div id="show">
 2 
 3 </div>
 4 
 5         <script type="text/javascript">
 6             var show = document.getElementById(show);;
 7             var num = 0;
 8             var br = 0;
 9             search:
10                 while (num <= 10000) {
11                     num += 1;
12                     for (var j = 2; j <= Math.sqrt(num); j++) {
13                         console.log(num%j= + (num % j));
14                         if (num % j == 0) {
15                             continue search;
16                         }
17                     }
18                     // 大量的 运算导致了 dom 渲染阻塞
19                     if (br % 5 == 0) {
20                         show.innerHTML += "<br/>";
21                     }
22                     show.innerHTML += (num + "&nbsp;&nbsp;");
23                     br++;
24                 }
25         </script>

大量的运算导致了 dom 渲染等待延迟。

使用 Worker:

定义 worker.js 文件(名字任意)

 1 var num = 0;
 2 
 3 search:
 4     while (num <= 10000) {
 5         num += 1;
 6         //console.log(num);
 7         for (var j = 2; j <= Math.sqrt(num); j++) {
 8             console.log(‘num%j=‘ + (num % j));
 9             if (num % j == 0) {
10                 continue search;
11             }
12         }
13         
14 
15         postMessage(num); // 向 有 该js 的worker 传递 数据,数据可以是复杂类型
16 
17     }

html 页面

 1         <div id="show">
 2 
 3         </div>
 4         <script type="text/javascript">
 5             var show = document.getElementById(show);
 6             var br = 0;
 7             var worker = new Worker("js/worker.js"); // 构造Worker对象
 8             worker.onmessage = function(event) {
 9                 if (br % 5 == 0) {
10                     show.innerHTML += "<br/>";
11                 }
12                 show.innerHTML += event.data + ",";
13                 br++;
14             }
15         </script>

 

Worker 实现 js 多线程

标签:

原文地址:http://www.cnblogs.com/ChuangZhang/p/5406321.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!