Javascript多線程


最近項目中要用一個倒計時,但是當彈窗的時候倒計時會被阻塞,所以我想到使用Javascript多線程解決該問題。

雖然JavaScript是單線程的,但是通過worker可以讓Javascript另外開一個線程來執行你想執行的js文件

let worker = new Worker('js文件路徑');

線程之間的通信方式

主線程

worker.PostMessage(你想傳輸的數據);

worker.onmessage = function(event){

  //event.data是子線程返回的數據

}

子線程

onmessage 接收主線程數據

PostMessage 向主線程發送數據

 

舉一個栗子:

<!DOCTYPE html>
<html lang="zh">
<head>
  <title>多線程</title>
  <meta charset="utf-8"/>
  <meta name="Description" content=""/>
  <meta name="Author" content="巽秋"/>
  <style type="text/css"></style>
</head>
<body>
  <div>
    <span id="hour"></span>:<span id="minute"></span>:<span id="second"></span>
  </div>

  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script>
    let worker = new Worker('./index.js');
    worker.postMessage(new Date().getTime()+1000000);
    worker.onmessage = function (event) {
      $("#hour").text(event.data.hour);
      $("#minute").text(event.data.minute);
      $("#second").text(event.data.second);
    }
  </script>
</body>
</html>

上面我在script中讓當前文件夾下的index用新的進程執行

下面是index中的代碼

onmessage = function (event) {
  let end_time = event.data;
  if(end_time>new Date().getTime()){
    end_time=end_time/1000;
    setInterval(function(){
      let now_time =  Math.round(new Date().getTime()/1000);  //現在的時間
      let time =end_time - now_time;
      let hour = parseInt(time / 60 / 60 );
      let minute = parseInt(time / 60 % 60);
      let seconds = parseInt(time % 60);
      if(now_time<= end_time){
        if(hour < 10){
          hour = "0" + hour;
        }
        if(minute < 10){
          minute = "0" + minute;
        }
        if(seconds < 10){
          seconds = "0" + seconds;
        }
        postMessage({hour:hour,minute:minute,second:seconds}); //返回這一秒的數據
      }
    },1000);
  }
};

 

這樣一來雖然彈窗的時候數字不再倒計時了,但是實際上在另一個線程中的js在倒計時,所以這樣一來問題就解決了

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM