javascript實現多線程 Concurrent.Thread.js

標籤：listener   瞭解   效果   運用   i++   for 迴圈   dev   nbsp   發送   

在這次我的項目中，因為前端要檢測硬體載入並識別，再向後台請求發送資料，然後再返回的相應的設定檔！在這過程，要好時好幾秒鐘，嚴重影響體驗效果，所以在網上靠看的方案，運用多線程去處理，這效果明顯改善！

  在這同步檢測過程，效果就如for迴圈一個很大數字(模仿複雜的邏輯代碼運算)，卡在哪裡，導致不了其他的操作！

 

大家可以先不用這庫，測試一下如下代碼看看效果：

1 <script>2     var btn = document.querySelector(‘.clickBtn‘);3     btn.addEventListener(‘click‘, function () {4         alert(‘我要多久才可以彈出來啊！！！！‘)5     });6     for (var i = 0; i < 99999; i++) {7         console.log(i);8     }9 </script>

因為雖然在點擊按鈕在前面，可是在javascript的實現是放在javascript的非同步事件隊列中，因此這時候要等到 for 迴圈完才 執行 alert(1);

 

這次用這個庫的效果：

 1  1 <script src="Concurrent.Thread.js"></script> 2  2 <script> 3  3     Concurrent.Thread.create(function () { 4  4         var btn = document.querySelector(‘.clickBtn‘); 5  5         btn.addEventListener(‘click‘, function () { 6  6             alert(‘我要多久才可以彈出來啊！！！！‘) 7  7         }); 8  8         for (var i = 0; i < 99999; i++) { 9  9             console.log(i);10 10         }11 11     });12 12 </script>

立刻點擊按鈕，馬上又反應alert! 這就是多線程的麼裡所在......

這次項目，用到主要是這個庫的提供的非同步通訊：Concurrent.Thread提供了一個應用JavaScript 的非同步通訊方式實現的定製通訊庫，它被設計成當一個線程在等待伺服器的響應時允許其它線程運行。這個通訊庫存於 Concurrent.Thread.Http。

參考的教程的用法如下：示範GET方式

< script type="text/javascript" src="Concurrent.Thread.js">< /script>
< script type="text/x-script.multithreaded-js">
　　var req = Concurrent.Thread.Http.get(url, ["Accept", "*"]);
　　if (req.status == 200) {
　　　　alert(req.responseText);
　　} else {
　　　　alert(req.statusText);
}
< /script>

 

至於更詳細的用法，大家可以在網上查看更多的資料，去瞭解這個庫的魅力所在！

 

 

 

 

 

 

javascript實現多線程 Concurrent.Thread.js