javascript实现多线程 Concurrent.Thread.js

Posted 2020-09-19 流舟

在这次我的项目中，因为前端要检测硬件加载并识别，再向后台请求发送数据，然后再返回的相应的配置文件！在这过程，要好时好几秒钟，严重影响体验效果，所以在网上靠看的方案，运用多线程去处理，这效果明显改善！

  在这同步检测过程，效果就如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>

 

至于更详细的用法，大家可以在网上查看更多的资料，去了解这个库的魅力所在！