异步运行函数

JavaScriptJavaScriptBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本实验中,我们将学习如何使用 Web Worker 异步执行长时间运行的函数。本实验的目的是教导开发者如何在单独的线程中运行函数,从而在函数执行时避免阻塞用户界面。本实验提供了一个关于如何创建 Web Worker 并使用它来运行函数的实际示例。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/ToolsandEnvironmentGroup(["`Tools and Environment`"]) javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/comp_ops("`Comparison Operators`") javascript/BasicConceptsGroup -.-> javascript/loops("`Loops`") javascript/BasicConceptsGroup -.-> javascript/obj_manip("`Object Manipulation`") javascript/AdvancedConceptsGroup -.-> javascript/async_prog("`Asynchronous Programming`") javascript/AdvancedConceptsGroup -.-> javascript/template_lit("`Template Literals`") javascript/ToolsandEnvironmentGroup -.-> javascript/debugging("`Debugging`") subgraph Lab Skills javascript/variables -.-> lab-28606{{"`异步运行函数`"}} javascript/data_types -.-> lab-28606{{"`异步运行函数`"}} javascript/arith_ops -.-> lab-28606{{"`异步运行函数`"}} javascript/comp_ops -.-> lab-28606{{"`异步运行函数`"}} javascript/loops -.-> lab-28606{{"`异步运行函数`"}} javascript/obj_manip -.-> lab-28606{{"`异步运行函数`"}} javascript/async_prog -.-> lab-28606{{"`异步运行函数`"}} javascript/template_lit -.-> lab-28606{{"`异步运行函数`"}} javascript/debugging -.-> lab-28606{{"`异步运行函数`"}} end

使用 Web Workers 进行异步函数执行

要在不阻塞用户界面的情况下执行函数,请使用 Web Worker 在单独的线程中运行该函数。具体方法如下:

  1. 使用 Blob 对象 URL 创建一个 Worker,其内容为要执行函数的字符串化版本。
  2. 立即回调调用该函数的返回值。
  3. 返回一个 Promise,监听 onmessageonerror 事件,并解析从 worker 发回的数据,或者抛出错误。
const runAsync = (fn) => {
  const worker = new Worker(
    URL.createObjectURL(new Blob([`postMessage((${fn})());`]), {
      type: "application/javascript; charset=utf-8"
    })
  );
  return new Promise((resolve, reject) => {
    worker.onmessage = ({ data }) => {
      resolve(data);
      worker.terminate();
    };
    worker.onerror = (error) => {
      reject(error);
      worker.terminate();
    };
  });
};

请注意,提供给 runAsync 的函数不应使用闭包,因为所有内容都会被字符串化并变成字面量。因此,所有变量和函数都必须在内部定义。以下是一些示例:

const longRunningFunction = () => {
  let result = 0;
  for (let i = 0; i < 1000; i++)
    for (let j = 0; j < 700; j++)
      for (let k = 0; k < 300; k++) result = result + i + j + k;

  return result;
};

runAsync(longRunningFunction).then(console.log); // 209685000000
runAsync(() => 10 ** 3).then(console.log); // 1000
let outsideVariable = 50;
runAsync(() => typeof outsideVariable).then(console.log); // 'undefined'

总结

恭喜你!你已经完成了异步运行函数实验。你可以在 LabEx 中练习更多实验来提升你的技能。

您可能感兴趣的其他 JavaScript 教程