zoukankan      html  css  js  c++  java
  • web worker技术-js新线程

    web worker的小例子,用来入门很合适,建议启动服务来开发。可以使用node的anywhere。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        ddd
    </body>
    <script src="./index.js"></script>
    </html>
    

      

    index.js
    // 实例化 Worker 对象,其实质为新创建的工作线程在主线程的引用
    var worker = new Worker("task.js")
    // postMessage 方法与新创建的工作线程通信
    worker.postMessage({
        id: 1,
        msg: 'Hello World'
    });
    // 当 Worker 线程返回数据时,onmessage 回调函数执行
    worker.onmessage = function (message) {
        var data = message.data;
        console.log(JSON.stringify(data))
        // terminate 方法终止 worker 线程的运行
        worker.terminate()
    };
    // 当 Worker 线程出错时,onerror 回调函数执行
    // error 参数中封装了错误对象的文件名、出错行号和具体错误信息
    worker.onerror = function (error) {
        console.log(error.filename, error.lineno, error.message)
    }
    

      

    task.js
    
    onmessage = function (message) {
        var data = message.data
        console.log(data)
        data.msg = 'Hi from task.js'
        postMessage(data)
    }
    

    这是web worker的工作原理

  • 相关阅读:
    JS高级拖拽
    JS高级Date类
    JS高级闭包
    JS笔记整理
    JS高级解决函数内的this指向
    JS高级事件委托
    JS高级 事件对象
    JS中级面向对象
    JS中级
    JS高级
  • 原文地址:https://www.cnblogs.com/yiyi17/p/9021048.html
Copyright © 2011-2022 走看看