js的多线程示例

2024-07-16 05:16:07
开发
26

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>普通worker</title>
  </head>
  <body>
    <script type="app/worker" id="wrs">
      this.onmessage = function(e){
        console.log(666.331,e.data)

        this.postMessage("副线程发送的数据[副数据]");
      }
    </script>
    <script>
      if (typeof Worker !== undefined) {
        var blob = new Blob([document.querySelector("#wrs").textContent]);
        var url = window.URL.createObjectURL(blob);

        var worker = new Worker(url);

        // 监听副线程返回的消息
        worker.onmessage = (e) => {
          console.log(666.001, e.data);

          // 关闭副线程
          worker.terminate();
        };
        worker.postMessage("主线程发送的数据[主数据]");
      } else {
        console.log(666.002, "不支持Worker");
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>异步worker</title>
  </head>
  <body>
    <script>
      var workerVal = {
        fn: (params) => {
          return "test worker===" + JSON.stringify(params);
        },
        params: { a: 1, b: 1 },
      };

      function prWorker(fw) {
        try {
          if (typeof Worker !== undefined) {
            return new Promise((resolve, reject) => {
              const worker = new Worker(
                window.URL.createObjectURL(
                  new Blob([
                    `
                      var wVal=eval(${fw.fn.toString()})(${JSON.stringify(
                      fw.params
                    )})
                      this.postMessage(wVal);
                    `,
                  ])
                )
              );
              worker.onmessage = (e) => {
                const res = { code: 200, data: e.data };
                worker.terminate();
                resolve(res);
              };
            });
          } else {
            return Promise.resolve({ code: 200, data: fw.fn(fw.params) });
          }
        } catch (err) {
          return Promise.resolve({ code: 0, data: "" });
        }
      }
    </script>
    <script>
      prWorker(workerVal).then((res) => {
        console.log(666.998, res);
      });
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>监听worker</title>
  </head>
  <body>
    <script>
      var workerVal = {
        fn: (params, wk, cb) => {
          let i = 0;
          setInterval(() => {
            i++;
            const val = i + " test worker===" + JSON.stringify(params);
            if (cb) {
              cb({ code: 200, data: val });
            } else {
              wk.postMessage(val);
            }
          }, 1000);
        },
        params: { a: 1, b: 1 },
      };

      function wkWorker(fw, cb) {
        try {
          if (typeof Worker !== undefined) {
            const worker = new Worker(
              window.URL.createObjectURL(
                new Blob([
                  `
                  var wVal=eval(${fw.fn.toString()})(${JSON.stringify(
                    fw.params
                  )},this,'')
                    `,
                ])
              )
            );
            worker.onmessage = (e) => {
              cb({ code: 200, data: e.data });
            };
          } else {
            fw.fn(fw.params, "", cb);
          }
        } catch (err) {}
      }
    </script>
    <script>
      wkWorker(workerVal, (res) => {
        console.log(666.998, res);
      });
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test worker</title>
  </head>
  <body>
    <script>
      if (typeof Worker !== undefined) {
        // 开启副线程
        var worker = new Worker("./js.js");

        // 发送消息给副线程
        worker.postMessage("发消息到js");

        // 监听副线程返回的消息
        worker.onmessage = (e) => {
          console.log(666.001, e.data);

          // 关闭副线程
          worker.terminate();
        };
      } else {
        console.log(666.002, "不支持Worker");
      }
    </script>
  </body>
</html>

self.onmessage = function (e) {
  //监听主线程发过来的消息
  console.log(666.111, e.data);

  // 将信息发送到主线程上
  self.postMessage("发一条消息到html");
};

原文地址:https://blog.csdn.net/qq_25753445/article/details/140416599 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1812959350784921600.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部

js的多线程示例

相关推荐

最近更新

热门阅读