zoukankan      html  css  js  c++  java
  • Html5 Web Workers

    当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。

    Web Workers 是运行在后台的 JavaScript线程,独立于其他脚本,不会影响到前端其他任何操作或体验。

    主要过程包括:
    1、创建Worker对象;
    2、将参数值传递通过Worker对象的postMessage方法传递传递给后台线程脚本;
    3、后台线程脚本处理后将结果通过postMessage方法返回;
    4、原脚本通过监听onMessage事件获取后台线程传过来的值。

    实例代码如下:

    html页面:

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     5         <title>无标题文档</title>
     6         <script type="text/javascript" src="bb.js">
     7         </script>
     8     </head>
     9     <body>
    10         输入数值:<input type="text" id="num"><input type="button" id="button" value="计算" />
    11     </body>
    12 </html>

    bb.js代码:

     1 window.onload = function() {
     2     var worker = new Worker("sumCalculate.js");
     3     console.log(worker);
     4     var bbDom = document.getElementById("button");
     5     
     6     bbDom.addEventListener("click", f);
     7     
     8     function f(){
     9         var num = parseInt(document.getElementById("num").value);
    10         worker.postMessage(num);
    11     }
    12 
    13     worker.onmessage = function(event) {
    14         alert(event.data);
    15     }
    16 }

    后台线程sumCalculate.js代码:

    1 onmessage = function(event) {
    2     var result = event.data * 10;
    3     postMessage(result);
    4 }
  • 相关阅读:
    制作A4纸打印的网页像素大小设置(转)
    关于Vue.use()详解
    Vue的axios如何全局注册
    JS中的apply,call,bind深入理解
    JS异步编程 (2)
    JS异步编程 (1)
    彻底搞清楚javascript中的require、import和export(js模块加载规范的前世今生)
    IPv6地址分类及表示方法
    SublimeText3追踪函数工具CTags设置及使用
    转-编写CGI小结
  • 原文地址:https://www.cnblogs.com/lwbqqyumidi/p/2761046.html
Copyright © 2011-2022 走看看