最近项目中要用一个倒计时，但是当弹窗的时候倒计时会被阻塞，所以我想到使用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在倒计时，所以这样一来问题就解决了