1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.   <meta charset="UTF-8" />
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    8.   <title>开启js多线程</title>
    9. </head>
    11. <body>
    12.   <button id="button">运行</button>
    13.   <script>
    14.     document.getElementById('button').onclick = function () {
    15.       console.log('点击');
    16.       let url = scriptToUrl(sleep);
    17.       console.log(url);
    18.       newWork(url);
    19.       test("我应该被阻塞的");
    20.     };
    21.     function test(msg) {
    22.       console.log(arguments);
    23.       console.log(msg);
    24.     }
    25.     //使用for循环实现阻塞
    26.     function sleep(d) {
    27.       for (var t = Date.now(); Date.now() - t <= 3000;);
    28.       console.log("另一个线程循环结束");
    29.     }
    30.     function newWork(url) {
    31.       return myWorker = new Worker(url);
    32.     }
    33.     // js转bolb url链接
    34.     function scriptToUrl(script) {
    35.       return URL.createObjectURL(new Blob([`(${script.toString()})()`]));
    36.     }
    37.     test(123)
    38.   </script>
    39. </body>
    41. </html>