歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> HTML5之Worker用法

HTML5之Worker用法

日期:2017/3/1 10:51:19   编辑:Linux編程

HTML5提供了Worker類用於多線程處理。Worker是在UI主線程中創建,後台執行的一段js腳本,它通過消息與UI線程傳遞數據。使用Worker就3步:

cheungmine 2011-11-29

第1步:創建一個Worker,需要指定一個js文件,作為Worker線程的執行體:

var worker = new Worker("worker.js");

第2步:給Worker實例指定消息處理函數,只有2個:onmessage ,onerror
worker.onmessage = function (event) {
// update UI here
var t1 = new Date().getTime();
elemById("_time").value = t1 - t0;
elemById("_piValue").value = event.data;
};

worker.onerror = function (event) {
alert(event.message);
};

第3步:給worker發消息:postMessage。

elemById("_time").value = "-";
t0 = new Date().getTime();
worker.postMessage(parseInt(elemById("_num_rects").value));


下面以一個具體的例子來說明Worker的用法。這個例子是用數值積分的方法求pi=(3.1415926....)的。worker.js就是做這個工作。

  1. // worker.js
  2. // calculate pi using numerical integration
  3. // 2011-11, cheungmine
  4. self.onmessage = function (event) {
  5. // numerical integration to calc pi
  6. var num_rects = event.data;
  7. var width = 1.0/num_rects;
  8. var mid;
  9. var height;
  10. var sum = 0.0;
  11. var area;
  12. for (var i=0; i<num_rects; i++) {
  13. mid = (i+0.5) * width;
  14. height = 4.0/(1.0+mid*mid);
  15. sum += height;
  16. }
  17. area = width*sum; // area=pi
  18. // post message back to UI thread
  19. self.postMessage(area);
  20. };
HTML5主頁面js-test.html如下:
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>js-test.html</title>
  6. <script type="text/javascript">
  7. function elemById(id) {
  8. return document.getElementById(id);
  9. }
  10. function getBrowserAgent() {
  11. var browser = "$";
  12. if ((navigator.userAgent.indexOf('MSIE') >= 0) &&
  13. (navigator.userAgent.indexOf('Opera') < 0)){
  14. browser = "$IE";
  15. }
  16. else if (navigator.userAgent.indexOf('Firefox') >= 0){
  17. browser = "$FIREFOX";
  18. }
  19. else if (navigator.userAgent.indexOf('Opera') >= 0){
  20. browser = "$OPERA";
  21. }
  22. else if (navigator.userAgent.indexOf('Chrome') >= 0){
  23. browser = "$CHROME";
  24. }
  25. return browser;
  26. }
  27. var browser = getBrowserAgent();
  28. window.addEventListener('load',
  29. function () {
  30. if (browser=="$IE") {
  31. // MSIE
  32. if (window.confirm("IE does not support HTML5 currently.\n"+
  33. "please use lastest FireFox, Chrome or Opera!\n"+
  34. "if you havenot any of them installed,\n"+
  35. "please click OK to enter download page.")) {
  36. window.location.replace("selbrowser.html");
  37. }
  38. else {
  39. window.close();
  40. }
  41. }
  42. else if (browser=="$FIREFOX"||browser=="$CHROME") {
  43. // do stuff for FireFox and Chrome
  44. }
  45. else {
  46. // do stuff for others
  47. }
  48. initPage();
  49. },
  50. false
  51. );
  52. var dt = new Date();
  53. var t0 = 0;
  54. function initPage () {
  55. // onclick
  56. elemById("_piWorker").addEventListener('click',
  57. function(){
  58. var worker = new Worker("worker.js");
  59. worker.onmessage = function (event) {
  60. // update UI here
  61. var t1 = new Date().getTime();
  62. elemById("_time").value = t1 - t0;
  63. elemById("_piValue").value = event.data;
  64. };
  65. worker.onerror = function (event) {
  66. alert(event.message);
  67. };
  68. elemById("_time").value = "-";
  69. t0 = new Date().getTime();
  70. worker.postMessage(parseInt(elemById("_num_rects").value));
  71. },
  72. false
  73. );
  74. }
  75. </script>
  76. </head>
  77. <body>
  78. <p>Press button "calc" to get pi</p>
  79. <p>
  80. <input type="input" size="10" id="_num_rects" value="100000000">
  81. <input type="button" id="_piWorker" value="calc">
  82. pi=<input type="input" size="30" id="_piValue" value="">
  83. time elapsed: <input type="input" size="10" id="_time" value="-">
  84. </p>
  85. </body>
  86. </html>
Copyright © Linux教程網 All Rights Reserved