解决JS单线程执行

最新推荐文章于 2024-07-16 17:17:45 发布

小怪兽_v

最新推荐文章于 2024-07-16 17:17:45 发布

阅读量2.5k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_49080170/article/details/126223908

版权

创建一个worker 对象并向它传递将在新线程中执行的脚本的URl

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>递归</title>
</head>
<body>
  <input type="text" id="number">
  <button id="btn">计算</button>
  <script>
    let input = document.getElementById('number')

    document.getElementById('btn').onclick = function (){
      let number = input.value

      // 创建一个worker 对象并向它传递将在新线程中执行的脚本的URl
      let worker = new Worker('./worker.js')

      // 接收worker 传过来的数据函数
      worker.onmessage = function (event) {
        console.log('主线程接收分线程返回的数据', event.data)
        alert(event.data)
      }
      
      // 向分线程发送信息
      worker.postMessage(number)
      console.log('主线程向分线程发送数据请求' + number)
    }

  </script>
</body>
</html>

新线程

function countNum(n) {
  return n <= 2 ? 1 : countNum(n - 1) + countNum(n - 2)   //----->递归调用
}
// 只能用函数表达式
var onmessage = function (event){
  var number = event.data
  // 通过event.data获得发送来的数据
  var result = countNum(number)
  // 返回数据给主线程
  postMessage(result)
  console.log('分线程返回数据给主线程' + result)
}