亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

HTML5 多線程處理

發布時間：2020-05-31 09:06:24 來源：網絡 閱讀：1209 作者：charles_wang888 欄目：移動開發

 HTML5中我覺得最有用和激動人心的功能就是引入了線程的概念，從而我們可以用多線程的思想來處理比較復雜的應用。我們可以讓前臺線程去完成和用戶交互的工作，而把比較復雜的，耗時較長的運算放在后臺線程中完成，而讓前臺線程與后臺線程通過消息交互.(注意：后臺線程是不可以直接操作window對象和dom樹的)

創建后臺線程的核心就是HTML5 提供的 Workers API ,下面是我用這個API開發一個相對比較復雜的應用。

 

假設我們有一個需求，頁面上有一個輸入框，讓用戶輸入一個整數，然后計算出所有小于這個整數的素數，然后把所有的素數分別計算平方，最后吧結果顯示在主頁面上。

如果不用HTML5，那么將會是非常長的一段JS代碼，而且如果輸入的值比較大時，它會吧整個頁面全部“凍結”，有了HTML5就輕松許多了，我們分工如下：

 

主線程：把主頁面上的輸入框的中的數發送給后臺線程1

后臺線程1：根據這個數來找到所有比它小的素數，然后把這些素數封裝在一個JSON數組中發送給主線程,同時把這一步驟的處理時間發送給主線程

主線程：收到后臺線程發過來的信息，然后把素數列表發給后臺線程2

后臺線程2：對于素數列表中的每一個素數，計算求出其平方，然后把所有的結果以JSON數組形式發送給主線程，同時把這一步驟的處理時間發送給主線程

主線程：把后臺線程1，后臺線程2所得到的結果以及每個線程執行各自所用的時間顯示在主頁面上指定id的區域內

 

所以，我們首先要有個主頁面，用來接受用戶輸入和最終顯示結果，這個頁面代碼如下：

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4. <meta 
  5.     charset="utf-8" 
  6. /> 
  7. <title>HTML5 線程交互例子</title> 
  8. <script 
  9.     type="text/javascript" 
  10.     src="js/mainthread.js" 
  11. > 
  12. </script> 
  13.   
  14.  
  15. </head> 
  16.  
  17. <body> 
  18.     <p>這個例子演示HTML5中的Worker的用法，它可以讓主線程和多個后臺線程合作來完成一項任務</p> 
  19.     <p>步驟概述： 
  20.     <p>主線程：把主頁面上的輸入框的中的數發送給后臺線程1</p> 
  21.     <p>后臺線程1：根據這個數來找到所有比它小的素數，然后把這些素數封裝在一個字符串對象中發送給主線程,同時把這一步驟的處理時間發送給主線程</p> 
  22.     <p>主線程收到后臺線程發過來的信息，然后把素數列表發給后臺線程2</p> 
  23.     <p>后臺線程2：對于素數列表中的每一個素數，計算求出其平方，然后把所有的結果發送給主線程，同時把這一步的處理時間發送給主線程</p> 
  24.     <p>主線程：構造html頁面，顯示出每個步驟的處理時間，以及最終顯示結果</p> 
  25.     <br> 
  26.     輸入一個正整數： 
  27.     <input type="text" id="inputedInteger"/> 
  28.     <input type="button" value="點擊讓主線程把這個數值發送給后臺線程1" onclick="handleInputInteger()"/> 
  29.      
  30.     <p id="result"></p> 
  31. </body> 
  32.  
  33. </html> 

 

 

其次，我們來構建主線程，它主要任務就是進行協調和調度，它先取得用戶輸入，然后發送消息給后臺工作線程1，之后接收從后臺工作線程1返回的內含素數數組的消息，并把這個數組發給后臺工作線程2，再接收從后臺工作線程2中返回的內含素數平方數組的消息，最終把所有消息匯總然后打印在主頁面上，細節請看我的代碼注釋：

mainthread.js

  1. //這個函數是頁面上點擊button的事件處理函數 
  2. function handleInputInteger(){ 
  3.      
  4. //讓window對象創建第一個后臺線程(worker1)，這個后臺線程專門負責得到小于等于某個整數的所有素數 
  5. var worker1= new Worker("js/worker1-getPrimeList.js"); 
  6.  
  7.  
  8. //獲取用戶輸入的整數并轉為10進制 
  9. var integerInput=document.getElementById("inputedInteger").value; 
  10. var num=parseInt(integerInput,10); 
  11.  
  12. //把從用戶輸入的整數傳給后臺線程1 
  13. worker1.postMessage(num); 
  14.  
  15.  
  16. //當獲取從后臺線程1(worker1)傳遞過來的結果時，我們處理這個結果,我們這個結果是個json對象 
  17. worker1.onmessage=function(event){ 
  18.   
  19.     //取得從后臺線程1(worker1)返回的JSON對象,并且分離出信息 
  20.     //其中primeArray是由后臺線程1(worker1)完成的取得所有<=指定整數的素數構成的素數數組（還是未解析的JSON數組） 
  21.     //而worker1ElapsedTime則是后臺線程1(worker1)完成它的工作的用時，單位毫秒 
  22.     var data = event.data; 
  23.     var dataInfo=JSON.parse(data); 
  24.     var primeArray=dataInfo.primeArray; 
  25.     var worker1ElapsedTime=dataInfo.worker1ElapsedTime; 
  26.      
  27.      
  28.     //我們讓主線程創建第二個后臺線程(worker2)，這個后臺線程可以把所有的素數計算平方 
  29.     var worker2 = new Worker("js/worker2-getSquaredPrimeList.js"); 
  30.      
  31.     //把primeArray的信息發送給第二個后臺線程（worker2） 
  32.     worker2.postMessage(primeArray); 
  33.      
  34.     //當獲得從后臺線程2(worker2)傳來的結果時，我們在主頁面上構造信息塊，反映出整個過程 
  35.     worker2.onmessage=function(event){ 
  36.          
  37.         //取得從后臺線程2(worker2)返回的JSON對象，并且分離出信息 
  38.         //primeArray是從主線程傳遞給后臺線程2（worker2)的素數數組 
  39.         //squaredPrimeArray是由后臺線程2(worker2)完成的所有的素數的平方構成的數組 
  40.         //而worker2ElapsedTime則是后臺線程2（worker2)完成它的工作的用時，單位毫秒 
  41.         var data = event.data; 
  42.         var dataInfo=JSON.parse(data); 
  43.         var primeArray=dataInfo.primeArray; 
  44.         var squaredPrimeArray=dataInfo.squaredPrimeArray; 
  45.         var worker2ElapsedTime=dataInfo.worker2ElapsedTime; 
  46.          
  47.         //取得素數的個數 
  48.         var numOfPrimes=JSON.parse(primeArray).length; 
  49.         //構造信息文本,并且顯示在頁面上id為"result"的區域 
  50.         var result=document.getElementById("result"); 
  51.         var resultStr="用戶輸入的整數為： "+num+"<br>"; 
  52.         resultStr+="<br>"; 
  53.         resultStr+="后臺線程1(worker1)經過分析可知，小于該整數的素數一共有"+numOfPrimes+"個。"+"<br>"; 
  54.         resultStr+="后臺線程1(worker1)得到了素數數組為："+primeArray+"<br>"; 
  55.         resultStr+="后臺線程1(worker1)的操作用時為： "+worker1ElapsedTime+"毫秒!"+"<br>"; 
  56.         resultStr+="<br>"; 
  57.         resultStr+="后臺線程2(worker2)得到的素數的平方數組為:"+squaredPrimeArray+"<br>"; 
  58.         resultStr+="后臺線程2(worker2)的操作用時為: "+worker2ElapsedTime+"毫秒!"+"<br>"; 
  59.         result.innerHTML=resultStr; 
  60.          
  61.     } 
  62.  
  63. }; 
  64.  
  65.  
  66. } 
  67.   

 

再次，我們來定義后臺工作線程1(worker1),這個線程必須被包含在一個js文件中，它必須定義當接收從主線程傳來的消息（一個整數）時的處理函數，它會構造一個小于這個整數的所有素數組成的素數數組，并把這個素數數組返回給調用者線程（主線程）、當然了，我們還需要一個輔助方法來判斷某個整數是否為素數，所以worker1-getPrimeList.js的代碼如下：

  1. //這個函數用于判斷某個數是否為素數 
  2. function isPrime(number) { 
  3.         if (number < 2) { 
  4.             return false; 
  5.         } else { 
  6.             for (var j = 2; j <= Math.sqrt(number); j++) { 
  7.                 if (number % j == 0) { 
  8.                     return false; 
  9.                 } 
  10.             } 
  11.         } 
  12.         return true; 
  13.     } 
  14.   
  15.  
  16. // 這個js代碼可以接收傳入的整數并且返回所有小于等于這個整數的素數列表 
  17. onmessage = function(event) { 
  18.      
  19.      
  20.     //計算開始時間 
  21.     var beginTime = new Date().getTime(); 
  22.      
  23.  
  24.     // 獲取用戶輸入的整數 
  25.     var num = event.data; 
  26.      
  27.  
  28.     // 構造一個buffer素數數組 
  29.     var bufferedPrimeArray = new Array(num); 
  30.  
  31.     var primeArrayMaxIndex=0; 
  32.     for (var i = 0; i < num; i++) { 
  33.         if (isPrime(i)){ 
  34.             bufferedPrimeArray[primeArrayMaxIndex]=i; 
  35.             primeArrayMaxIndex++; 
  36.         } 
  37.     } 
  38.      
  39.     //構造真正的素數數組 
  40.     var primeArray = new Array(primeArrayMaxIndex); 
  41.     //將buffer素數數組中的所有的素數移動到這個數組中 
  42.     for(var j=0;j<primeArrayMaxIndex;j++){ 
  43.         primeArray[j]=bufferedPrimeArray[j]; 
  44.     } 
  45.      
  46.     //計算結束時間 
  47.     var endTime= new Date().getTime(); 
  48.      
  49.     var elapsedTime=endTime-beginTime; 
  50.      
  51.      
  52.     //構造json對象來存儲信息: 
  53.     var data = new Object; 
  54.     data.primeArray = JSON.stringify(primeArray); 
  55.     data.worker1ElapsedTime= elapsedTime; 
  56.     var str=JSON.stringify(data); 
  57.      
  58.     //把這個json對象發送回主線程 (也就是創建這個worker1的線程） 
  59.     postMessage(str); 
  60.      
  61.      
  62. } 

 

最后，我們來定義后臺工作線程2(worker2),這個線程也必須被包含在一個js文件中，它必須定義當接收從主線程傳來的消息（一個素數數組）時的處理函數，它會構造一個對應的素數平方數組，并把這個素數數組，以及素數平方數組返回給調用者線程（主線程），所以worker2-getSquaredPrimeList.js的代碼如下：

  1. // 這個 js代碼可以把傳入的素數數組中每個素數依次求平方，然后構造一個素數平方數組 
  2. onmessage = function(event) { 
  3.      
  4.      
  5.     //計算開始時間 
  6.     var beginTime = new Date().getTime(); 
  7.      
  8.  
  9.     // 獲取從主線程傳來的素數數組,并且還原成真正的素數數組 
  10.     var primeArrayFromMainThread= event.data; 
  11.     var primeArray = JSON.parse(primeArrayFromMainThread); 
  12.     var length=primeArray.length; 
  13.  
  14.     //構造一個素數平方數組 
  15.     var squaredPrimeArray=new Array(length); 
  16.      
  17.     //將原來數組中的所有素數依次求平方，然后填充到這個新的平方數組中 
  18.     for (var i=0;i<length;i++){ 
  19.         squaredPrimeArray[i]=primeArray[i]* primeArray[i]; 
  20.     } 
  21.          
  22.      
  23.     //計算結束時間 
  24.     var endTime= new Date().getTime(); 
  25.      
  26.     var elapsedTime=endTime-beginTime; 
  27.      
  28.      
  29.     //構造json對象來存儲信息: 
  30.     var data = new Object; 
  31.     data.primeArray = JSON.stringify(primeArray); 
  32.     data.squaredPrimeArray=JSON.stringify(squaredPrimeArray); 
  33.     data.worker2ElapsedTime= elapsedTime; 
  34.     var str=JSON.stringify(data); 
  35.      
  36.     //把這個json對象發送回主線程 (也就是創建這個worker1的線程） 
  37.     postMessage(str); 
  38.      
  39.      
  40. } 

 

最后國際慣例，我們演示下例子：

首先，用戶輸入前：

HTML5 多線程處理

用戶輸入某個整數，比如98，則顯示如下：

HTML5 多線程處理

 

向AI問一下細節

免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手
华坪县| 肇庆市| 镇赉县| 尉氏县| 集贤县| 新邵县| 安乡县| 大连市| 尼勒克县| 陇南市| 安化县| 柏乡县| 桐城市| 平塘县| 安平县| 漯河市| 岳阳市| 雅江县| 华坪县| 咸阳市| 江达县| 左贡县| 城固县| 蕉岭县| 漳浦县| 普陀区| 阿鲁科尔沁旗| 五大连池市| 确山县| 霞浦县| 乌苏市| 墨竹工卡县| 惠东县| 陈巴尔虎旗| 吉木乃县| 贺州市| 静宁县| 奉化市| 河北省| 阳谷县| 普定县|