html5中Web Workers

最新推荐文章于 2024-06-28 07:27:21 发布

水星灭绝

最新推荐文章于 2024-06-28 07:27:21 发布

阅读量82

点赞数

分类专栏： h5 前端

本文链接：https://blog.csdn.net/wulong710/article/details/108775121

版权

前端同时被 2 个专栏收录

137 篇文章 0 订阅

订阅专栏

121 篇文章 3 订阅

订阅专栏

参考：https://www.runoob.com/html/html5-webworkers.html

本地用Worker启用js文件不成功，因为不同域。将html与js文件放到tomcat中，通过浏览器访问成功了.

启动tomcat，将html与js资源放到 D:\program\apache-tomcat-9.0.33\webapps\ROOT\testjs 中

go.html内容：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>web workers</title>
</head>

<body>
  <button onclick="start()" style="background-color: orange;font-size: 40px;">开始</button>
  <button onclick="stop()" style="background-color: orange;font-size: 40px;">停止</button>
  <br>
  <p><b>计数：</b> <output id="mCount">空空</output></p>
  <p>状态 ： <output id="mState" style="background-color:green;font-size: 30px;"></output></p>
  <script>
    var w;

    function start() {
      if (typeof (Worker) !== undefined) {
        if (!w) {
          w = new Worker("demo_workers.js");
          document.getElementById("mCount").innerHTML = "状态";
        }

        w.onmessage = function (event) {
          console.log("onmessage data = ", event.data);
          document.getElementById("mCount").innerHTML = event.data;
        };
      } else {
        document.getElementById("mCount").innerHTML = "浏览器不支持 Web Workers";
      }

      document.getElementById("mState").innerHTML = "开始了";
    }

    function stop() {
      if (w) {
        w.terminate();
        w = undefined;
      }
      document.getElementById("mState").innerHTML = "停止了";
    }

  </script>

</body>

</html>

demo_workers.js：

var mValue = 0;

function gogo() {
    setInterval(function () {
        mValue++;
        if (mValue > 6000) {
            mValue = 0;
        }

        postMessage("xx-" + mValue);
    }, 1000);
}

gogo();

浏览器中访问 http://localhost:8080/testjs/go.html