zoukankan      html  css  js  c++  java
  • web worker在react项目中的使用

    新建一个worker.js文件,编写worker子线程脚本,代码如下:

    const workercode = () => {
    
      self.onmessage = function(e) {
        console.log('Message received from main script');
        var workerResult = 'Received from main: ' + (e.data);
        console.log('Posting message back to main script');
        self.postMessage(workerResult); // here it's working without self
      }
    };
    // 把脚本代码转为string
    let code = workercode.toString();
    code = code.substring(code.indexOf("{")+1, code.lastIndexOf("}"));
    
    const blob = new Blob([code], {type: "application/javascript"});
    const worker_script = URL.createObjectURL(blob);
    
    module.exports = worker_script;
    

     按照上述方式,创建好worker_script,在react项目组件中引用时只需要在对应的组件文件中:

    import worker_script from './worker';
    var myWorker = new Worker(worker_script);
    
    myWorker.onmessage = (m) => {
           console.log("msg from worker: ", m.data);
    };
    myWorker.postMessage('im from main');
    

      

  • 相关阅读:
    JAVA队列的使用
    四种线程池的使用
    JAVA中只有值传递
    为什么说Java语言是平台无关的?
    Jsoup爬虫解析
    java爬虫
    oracle触发器
    easyUi引入方法
    highchart
    July 20th 2017 Week 29th Thursday
  • 原文地址:https://www.cnblogs.com/mmykdbc/p/13598067.html
Copyright © 2011-2022 走看看