在现代 web 开发中，异步编程是构建高性能、响应式应用程序的关键技术。随着 web 应用的复杂度不断增加，开发者需要处理各种异步任务，如网络请求、文件操作、定时任务等。JavaScript 作为 web 开发的核心语言，提供了丰富的异步编程机制，从传统的回调函数到现代的 Promise 和 async/await，再到强大的 Web Worker，帮助开发者高效地管理异步任务。
本教程将深入探讨 JavaScript 异步编程的各个方面，从基础概念到高级应用，逐步引导读者掌握异步编程的核心技能。我们将从简单的异步任务开始，逐步深入到复杂的异步任务管理，包括并发执行、错误处理、进度反馈等。通过实际代码示例和详细解析，读者将能够理解并应用这些技术，提升自己的开发能力。
无论你是初学者还是有一定经验的开发者，本教程都将为你提供宝贵的参考和实践指导。让我们一起开启 JavaScript 异步编程的探索之旅吧！
1. 异步编程基础
1.1 同步与异步的区别
同步和异步是编程中两种不同的执行方式，它们在执行顺序和效率上有显著差异。
-
同步执行：在同步执行中，代码按照顺序依次执行，每个操作必须等待前一个操作完成。例如，当执行一个网络请求时，程序会一直等待请求完成并返回结果，然后才能继续执行后续代码。这种方式的优点是逻辑简单，易于理解和调试，但缺点是效率低下，尤其是在处理 I/O 操作（如网络请求、文件读写等）时，程序会花费大量时间等待，导致资源浪费。
-
异步执行：异步执行允许程序在等待某个操作完成时继续执行其他代码。例如，在发起一个网络请求后，程序不会停下来等待结果，而是继续执行后续代码，当网络请求完成时再通过回调函数等方式处理结果。这种方式可以提高程序的效率，充分利用 CPU 资源，避免因等待 I/O 操作而造成的阻塞。
1.2 JavaScript运行机制与事件循环
JavaScript 是一种单线程语言，但它通过事件循环机制实现了异步执行。
-
单线程模型：JavaScript 的运行环境（如浏览器或 Node.js）只有一个主线程，所有代码都在这个线程中执行。这意味着在同一时间只能执行一个任务，如果一个任务执行时间过长，就会阻塞其他任务的执行。
-
事件循环机制：为了实现异步执行，JavaScript 引入了事件循环机制。事件循环会不断地检查任务队列，当主线程上的任务执行完毕后，就会从任务队列中取出一个任务并执行。任务队列中的任务通常是由异步操作（如定时器、网络请求等）触发的回调函数。事件循环机制使得 JavaScript 能够在单线程环境下实现高效的异步执行。
1.3 异步编程的应用场景
异步编程在 JavaScript 中有着广泛的应用场景，特别是在处理 I/O 操作和提高用户体验方面。
-
网络请求：在 Web 开发中，经常需要从服务器获取数据或向服务器发送数据。使用异步编程可以避免在请求过程中阻塞页面的其他操作，提高用户体验。
-
文件操作：在 Node.js 中，文件读写操作通常是异步的。通过异步编程，可以在文件读写操作完成时继续执行其他代码，提高程序的效率。
-
定时任务：使用定时器（如
setTimeout和setInterval）可以实现定时任务，这些任务会在指定的时间后执行，而不会阻塞主线程的其他操作。 -
动画效果：在页面中实现动画效果时，通常需要在一定的时间间隔内更新页面元素的样式。使用异步编程可以实现平滑的动画效果，而不会影响页面的其他操作。
2. 在循环过程中更新页面
2.1 使用 setTimeout 实现页面更新
在 JavaScript 中，setTimeout 是一种常用的异步方法，用于在指定的时间后执行代码。它可以帮助我们在循环过程中更新页面，而不会阻塞主线程。
-
基本用法：
setTimeout接受两个参数，第一个是回调函数，第二个是延迟时间（以毫秒为单位）。当延迟时间到达后，回调函数会被执行。 -
示例代码：
-
function updatePage() { let count = 0; const interval = 1000; // 每隔1秒更新一次 const maxCount = 10; // 更新10次 function update() { count++; console.log(`更新页面，当前计数：${count}`); document.getElementById('counter').innerText = `当前计数：${count}`; if (count < maxCount) { setTimeout(update, interval); } } update(); } updatePage(); -
运行效果：上述代码会在页面上显示一个计数器，每隔1秒更新一次，直到计数达到10。这种方式不会阻塞主线程，页面的其他操作仍然可以正常进行。
2.2 使用 requestAnimationFrame 优化页面渲染
requestAnimationFrame 是一种专门用于优化页面渲染的异步方法，它会在浏览器重绘之前执行回调函数，从而实现更平滑的动画效果。
-
基本用法：
requestAnimationFrame接受一个回调函数作为参数，该回调函数会在下一次重绘之前被调用。它可以递归调用自身，从而实现持续的更新。 -
示例代码：
-
function animate() { const element = document.getElementById('moving-element'); let position = 0; function update() { position += 1; element.style.left = `${position}px`; if (position < 200) { requestAnimationFrame(update); } } requestAnimationFrame(update); } animate(); -
运行效果：上述代码会将页面中的一个元素从左到右移动200像素。与
setTimeout相比，requestAnimationFrame提供了更平滑的动画效果，并且能够更好地与浏览器的刷新率同步，减少资源浪费。 -
性能优势：
requestAnimationFrame会根据浏览器的刷新率自动调整回调函数的执行频率，通常为每秒60次（即16.67毫秒一次）。这比手动设置setTimeout的间隔时间更加高效，尤其是在处理复杂的动画效果时。
3. 使用返回 Promise 对象的函数
3.1 Promise 的基本概念与状态
Promise 是 JavaScript 中用于处理异步操作的一种对象，它代表了一个可能还未完成的操作的最终结果。通过 Promise，可以将异步操作的执行结果与后续的处理逻辑解耦，从而实现更加清晰和灵活的代码结构。
-
基本概念：Promise 是一个代理对象，它代表了一个异步操作的最终结果。Promise 对象有三种状态：
-
Pending（进行中）：Promise 刚被创建时处于这个状态，表示异步操作尚未完成。
-
Fulfilled（已成功）：当异步操作成功完成时，Promise 的状态变为 Fulfilled，此时可以通过
.then()方法获取异步操作的结果。 -
Rejected（已失败）：当异步操作失败时，Promise 的状态变为 Rejected，此时可以通过
.catch()方法捕获错误。
-
-
状态转换：Promise 的状态只能从 Pending 转变为 Fulfilled 或 Rejected，并且一旦状态改变，就无法再改变。这种单向状态转换机制保证了 Promise 的行为是可预测的。
3.2 创建 Promise 对象与使用方法
创建 Promise 对象需要使用 new Promise() 构造函数，并传入一个执行器函数。执行器函数会在 Promise 对象创建时立即执行，并且可以调用 resolve() 和 reject() 方法来改变 Promise 的状态。
-
创建 Promise 对象：
-
const myPromise = new Promise((resolve, reject) => { // 模拟异步操作 setTimeout(() => { const success = true; // 假设异步操作成功 if (success) { resolve('操作成功'); // 改变状态为 Fulfilled } else { reject('操作失败'); // 改变状态为 Rejected } }, 2000); }); -
使用
.then()方法处理成功结果：.then()方法用于指定 Promise 成功完成时的处理逻辑。它接受一个回调函数作为参数，当 Promise 的状态变为 Fulfilled 时，该回调函数会被调用，并且可以获取异步操作的结果。 -
myPromise.then(result => { console.log(result); // 输出：操作成功 }); -
使用
.catch()方法处理失败结果：.catch()方法用于指定 Promise 失败时的处理逻辑。它接受一个回调函数作为参数，当 Promise 的状态变为 Rejected 时，该回调函数会被调用，并且可以捕获错误信息。 -
myPromise.catch(error => { console.error(error); // 输出：操作失败 }); -
链式调用：Promise 支持链式调用，可以在
.then()方法中返回一个新的 Promise 对象，从而实现多个异步操作的连续执行。这种方式可以避免嵌套回调函数，使代码更加清晰易读。
-
function fetchData(url) { return new Promise((resolve, reject) => { // 模拟网络请求 setTimeout(() => { const data = { name: 'Alice', age: 25 }; resolve(data); }, 1000); }); } function processData(data) { return new Promise((resolve, reject) => { // 模拟数据处理 setTimeout(() => { const processedData = { ...data, processed: true }; resolve(processedData); }, 1000); }); } fetchData('https://api.example.com/data') .then(data => { console.log('获取数据成功：', data); return processData(data); }) .then(processedData => { console.log('处理数据成功：', processedData); }) .catch(error => { console.error('发生错误：', error); });
4. 将使用回调的异步函数转换为 Promise
4.1 回调函数的局限性
回调函数是早期 JavaScript 中常用的异步处理方式，但随着应用复杂度的增加，其局限性逐渐显现。
-
回调地狱：当多个异步操作需要嵌套执行时，回调函数会形成多层嵌套的结构，导致代码难以阅读和维护。例如，当需要依次执行多个网络请求时，每个请求的回调函数中又嵌套了下一个请求的回调，代码的缩进层次不断增加，逻辑变得混乱。
-
错误处理困难：在回调函数中处理错误需要在每个回调中单独捕获和处理错误，这使得错误处理逻辑分散且复杂。一旦某个异步操作失败，很难将错误信息传递到上层逻辑中进行统一处理。
-
缺乏灵活性：回调函数的执行顺序和依赖关系难以控制，无法像同步代码那样方便地进行代码的重用和组合。这使得在处理复杂的异步流程时，代码的可扩展性和可维护性受到限制。
4.2 使用 Promise 封装回调函数
为了克服回调函数的局限性，可以使用 Promise 对象来封装回调函数，从而实现更加清晰和灵活的异步编程。
-
封装的基本思路：将回调函数的异步操作封装为一个 Promise 对象，通过
resolve()和reject()方法来处理异步操作的成功和失败。这样可以将回调函数的执行逻辑转换为 Promise 的状态转换，从而利用 Promise 提供的.then()和.catch()方法进行统一的处理。 -
封装示例：
-
// 原始的回调函数 function fetchData(callback) { setTimeout(() => { const data = { name: 'Alice', age: 25 }; callback(null, data); // 成功时调用回调函数 }, 1000); } // 使用 Promise 封装 function fetchDataWithPromise() { return new Promise((resolve, reject) => { fetchData((error, data) => { if (error) { reject(error); // 失败时调用 reject } else { resolve(data); // 成功时调用 resolve } }); }); } // 使用封装后的 Promise fetchDataWithPromise() .then(data => { console.log('获取数据成功：', data); }) .catch(error => { console.error('发生错误：', error); }); -
封装的优势：
-
代码结构清晰：通过 Promise 封装后，代码的结构更加清晰，避免了回调地狱的问题。可以利用 Promise 的链式调用，将多个异步操作按顺序连接起来，逻辑更加直观。
-
统一错误处理：Promise 提供了统一的错误处理机制，通过
.catch()方法可以集中捕获和处理异步操作中出现的错误，简化了错误处理逻辑。 -
增强灵活性：封装后的 Promise 对象可以像同步代码一样进行组合和重用，提高了代码的灵活性和可维护性。例如，可以将多个 Promise 对象组合使用
Promise.all()或Promise.race()等方法，实现更复杂的异步流程控制。
-
5. 并发执行多个 Promise
5.1 Promise.all 的使用与原理
Promise.all 是 JavaScript 中用于并发执行多个 Promise 的方法，它能够将多个 Promise 对象组合成一个新的 Promise 对象，当所有传入的 Promise 都成功完成时，返回的 Promise 才会成功完成，否则只要有一个 Promise 失败，返回的 Promise 就会失败。
-
基本用法：
-
const promise1 = new Promise((resolve, reject) => { setTimeout(() => resolve('Promise1 成功'), 1000); }); const promise2 = new Promise((resolve, reject) => { setTimeout(() => resolve('Promise2 成功'), 2000); }); const promise3 = new Promise((resolve, reject) => { setTimeout(() => resolve('Promise3 成功'), 1500); }); Promise.all([promise1, promise2, promise3]) .then(results => { console.log(results); // 输出：['Promise1 成功', 'Promise2 成功', 'Promise3 成功'] }) .catch(error => { console.error(error); }); -
原理分析：
-
Promise.all接受一个可迭代对象（如数组）作为参数，其中的每个元素都是一个 Promise 对象。 -
当所有 Promise 都成功完成时，返回的 Promise 的状态变为 Fulfilled，其结果是一个数组，包含每个 Promise 的结果，顺序与传入的顺序一致。
-
如果任何一个 Promise 失败，返回的 Promise 的状态变为 Rejected，其结果是第一个失败的 Promise 的错误信息。
-
-
性能优势：
-
并发执行多个 Promise 可以显著提高程序的效率，尤其是在处理多个独立的异步操作时。例如，在同时请求多个网络接口时，使用
Promise.all可以同时发起请求，而不是逐个等待，从而减少总的时间开销。
-
-
应用场景：
-
数据聚合：当需要从多个数据源获取数据并进行聚合处理时，
Promise.all是一个理想的选择。例如，在一个电商应用中，同时从多个服务器获取商品信息、库存信息和用户评价信息，然后将这些数据组合在一起展示给用户。 -
并行任务处理：在处理多个独立的任务时，
Promise.all可以确保所有任务都完成后再进行下一步操作。例如，在一个图片处理应用中，同时对多张图片进行压缩、裁剪和上传等操作，使用Promise.all可以确保所有图片都处理完成后才进行后续的保存或显示操作。
-
5.2 Promise.race 的特点与应用
Promise.race 是 JavaScript 中用于处理多个 Promise 的另一种方法，它会返回一个 Promise 对象，该对象的状态由第一个完成的 Promise 决定，无论是成功还是失败。
-
基本用法：
-
const promise1 = new Promise((resolve, reject) => { setTimeout(() => resolve('Promise1 成功'), 2000); }); const promise2 = new Promise((resolve, reject) => { setTimeout(() => reject('Promise2 失败'), 1000); }); const promise3 = new Promise((resolve, reject) => { setTimeout(() => resolve('Promise3 成功'), 1500); }); Promise.race([promise1, promise2, promise3]) .then(result => { console.log(result); }) .catch(error => { console.error(error); // 输出：Promise2 失败 }); -
特点分析：
-
Promise.race接受一个可迭代对象作为参数，其中的每个元素都是一个 Promise 对象。 -
当第一个 Promise 完成时（无论是成功还是失败），返回的 Promise 的状态就会确定，并且后续的 Promise 的结果将被忽略。
-
如果所有 Promise 都没有完成，返回的 Promise 将一直处于 Pending 状态。
-
-
应用场景：
-
超时控制：
Promise.race常用于实现超时控制。例如，在发起一个网络请求时，可以同时创建一个超时的 Promise，当超时的 Promise 完成时，表示请求超时，从而可以取消请求或进行其他处理。
-
-
-
const fetchData = new Promise((resolve, reject) => { setTimeout(() => resolve('数据获取成功'), 3000); }); const timeout = new Promise((resolve, reject) => { setTimeout(() => reject('请求超时'), 2000); }); Promise.race([fetchData, timeout]) .then(result => { console.log(result); }) .catch(error => { console.error(error); // 输出：请求超时 }); -
竞争条件处理：在多个异步操作中，只需等待第一个完成的操作，而忽略其他操作的结果。例如，在一个游戏应用中，同时监听多个用户的输入，当第一个用户操作完成时，立即处理该操作，而忽略其他用户的操作。
-
6. 使用await和async等待Promise完成
6.1 async和await的基本语法
async 和 await 是 JavaScript 中用于处理异步操作的语法糖，它们使得异步代码的编写更加简洁和直观，类似于同步代码的风格。
-
async函数：async关键字用于声明一个异步函数。异步函数内部可以使用await表达式来暂停函数的执行，直到某个异步操作完成。异步函数总是返回一个 Promise 对象，即使函数内部没有显式返回 Promise，也会自动将其返回值包装为一个 Promise。
-
async function fetchData() { return '数据获取成功'; } fetchData().then(result => { console.log(result); // 输出：数据获取成功 }); -
await表达式：await关键字用于等待一个 Promise 对象的完成。它只能在async函数内部使用，用于暂停函数的执行，直到 Promise 的状态变为 Fulfilled 或 Rejected。如果 Promise 成功完成，await表达式的返回值是 Promise 的结果；如果 Promise 失败，会抛出一个错误。 -
async function fetchData() { const promise = new Promise((resolve, reject) => { setTimeout(() => resolve('数据获取成功'), 1000); }); const result = await promise; console.log(result); // 输出：数据获取成功 } fetchData(); -
错误处理：在
async函数中使用await时，可以通过try...catch语句来捕获错误。如果 Promise 被 Reject，await会抛出一个错误，可以在catch块中捕获并处理。
-
async function fetchData() { try { const promise = new Promise((resolve, reject) => { setTimeout(() => reject('数据获取失败'), 1000); }); const result = await promise; console.log(result); } catch (error) { console.error(error); // 输出：数据获取失败 } } fetchData();
6.2 使用async/await简化异步代码
async 和 await 的引入极大地简化了异步代码的编写和阅读，避免了回调地狱和复杂的 Promise 链式调用。
-
简化异步流程：通过
async和await，可以将多个异步操作按顺序写成同步代码的风格，逻辑更加清晰易懂。例如，以下代码展示了如何使用async和await来简化多个异步操作的执行。
-
async function fetchData() { const response = await fetch('https://api.example.com/data'); const data = await response.json(); return data; } fetchData().then(data => { console.log(data); });在上述代码中，
fetch返回一个 Promise，通过await等待其完成并获取响应对象。然后，通过response.json()将响应体解析为 JSON 格式，同样使用await等待解析完成。最终返回解析后的数据。这种方式避免了嵌套的.then()调用，代码更加简洁。 -
提高代码可读性：
async和await使得异步代码的结构更加接近同步代码，便于理解和维护。开发者可以像编写同步代码一样编写异步逻辑，减少了心智负担。例如，以下代码展示了如何使用async和await来处理多个异步任务。 -
async function processTasks() { const task1 = await performTask1(); const task2 = await performTask2(); const task3 = await performTask3(); console.log('所有任务完成'); } processTasks();在上述代码中，
performTask1、performTask2和performTask3是异步函数，分别执行不同的任务。通过await依次等待每个任务完成，代码的执行顺序清晰明确，逻辑易于理解。 -
统一错误处理：
async和await结合try...catch语句，可以统一捕获异步操作中抛出的错误，简化了错误处理逻辑。与 Promise 的.catch()方法相比，try...catch更加直观，符合传统同步代码的错误处理习惯。例如，以下代码展示了如何统一处理异步操作中的错误。
-
async function fetchData() { try { const response = await fetch('https://api.example.com/data'); const data = await response.json(); return data; } catch (error) { console.error('发生错误：', error); throw error; // 重新抛出错误，以便上层调用者可以捕获 } } fetchData().catch(error => { console.error('最终捕获的错误：', error); });在上述代码中，
fetch和response.json()都是异步操作，可能会抛出错误。通过try...catch语句捕获这些错误，并在catch块中进行处理。如果需要，可以重新抛出错误，以便上层调用者可以进一步处理。这种方式使得错误处理更加集中和统一，避免了在多个.catch()方法中分散处理错误的复杂性。
7. 创建异步生成器函数
7.1 生成器函数的基本概念
生成器函数是 JavaScript 中一种特殊的函数，它允许函数的执行过程可以被暂停和恢复。生成器函数使用 function* 语法定义，并且可以通过 yield 表达式暂停函数的执行，直到下一次调用 next() 方法时继续执行。
-
基本语法：
-
function* generatorFunction() { yield '第一步'; yield '第二步'; yield '第三步'; } const generator = generatorFunction(); console.log(generator.next().value); // 输出：第一步 console.log(generator.next().value); // 输出：第二步 console.log(generator.next().value); // 输出：第三步 console.log(generator.next().value); // 输出：undefined（迭代完成） -
应用场景：生成器函数常用于实现复杂的迭代逻辑、控制异步流程以及实现协同程序。它允许在函数执行过程中多次返回值，并且可以在每次返回后暂停执行，等待下一次调用。
7.2 创建异步生成器函数与使用场景
异步生成器函数是生成器函数的异步版本，它允许在生成器函数中使用 await 表达式，从而实现异步操作的暂停和恢复。异步生成器函数使用 async function* 语法定义。
-
基本语法：
-
async function* asyncGeneratorFunction() { yield await new Promise(resolve => setTimeout(() => resolve('异步第一步'), 1000)); yield await new Promise(resolve => setTimeout(() => resolve('异步第二步'), 1000)); yield await new Promise(resolve => setTimeout(() => resolve('异步第三步'), 1000)); } const asyncGenerator = asyncGeneratorFunction(); asyncGenerator.next().then(result => console.log(result.value)); // 输出：异步第一步 asyncGenerator.next().then(result => console.log(result.value)); // 输出：异步第二步 asyncGenerator.next().then(result => console.log(result.value)); // 输出：异步第三步 -
使用场景：
-
异步数据流处理：异步生成器函数可以用于处理异步数据流，例如从服务器分批获取数据并逐步处理。每次通过
yield返回一批数据，然后在外部通过next()方法控制获取下一批数据。 -
异步任务调度：在需要按顺序执行多个异步任务时，异步生成器函数可以方便地控制任务的执行顺序。每个任务通过
await完成后，通过yield暂停执行，等待下一次调用。 -
资源管理：在需要管理异步资源（如文件读写、数据库连接等）时，异步生成器函数可以确保资源的正确释放。通过
yield暂停执行，可以在每次操作完成后释放资源，避免资源泄漏。
-
8. 使用 Web Worker 执行后台任务
8.1 Web Worker 的基本概念与创建
Web Worker 是一种在浏览器环境中运行的后台线程，它允许 JavaScript 在后台执行复杂计算或长时间运行的任务，而不会阻塞主线程，从而提高页面的响应性。
-
基本概念：Web Worker 是一个独立的线程，它运行在主线程之外，可以执行耗时的计算任务，如数据处理、加密解密等。由于它与主线程隔离，因此不会影响主线程的运行效率，也不会导致页面卡顿。
-
创建 Web Worker：
const worker = new Worker('worker.js'); // 创建一个 Web Worker，加载 worker.js 文件在 worker.js 文件中，可以编写需要在后台执行的代码。例如：
-
// worker.js self.onmessage = function(event) { const data = event.data; const result = data * 2; // 执行一些计算 self.postMessage(result); // 将结果发送回主线程 }; -
应用场景：Web Worker 适用于需要长时间运行的任务，如复杂的数学计算、数据加密解密、图像处理等。通过将这些任务放到后台线程中执行，可以避免主线程被阻塞，提高用户体验。
8.2 在主线程与 Web Worker 之间通信
主线程和 Web Worker 之间可以通过 postMessage 和 onmessage 方法进行通信。
-
主线程向 Web Worker 发送消息：
-
worker.postMessage(42); // 向 Web Worker 发送数据 -
Web Worker 接收消息并处理：
-
// worker.js self.onmessage = function(event) { const data = event.data; const result = data * 2; // 执行一些计算 self.postMessage(result); // 将结果发送回主线程 }; -
主线程接收 Web Worker 的消息：
-
worker.onmessage = function(event) { const result = event.data; console.log('从 Web Worker 接收到的结果：', result); // 输出：84 }; -
通信机制：主线程和 Web Worker 之间的通信是通过消息传递实现的。每个消息包含一个数据对象，可以是任意类型的数据（如字符串、数字、对象等）。通过
postMessage方法发送消息，通过onmessage事件接收消息。
8.3 使用 Web Worker 实现后台任务处理
通过 Web Worker，可以将复杂的任务放到后台线程中执行，从而提高页面的响应性。
-
示例：后台计算斐波那契数列：
// 主线程
const worker = new Worker('fibonacciWorker.js');
worker.postMessage(40); // 计算第 40 个斐波那契数
worker.onmessage = function(event) {
const result = event.data;
console.log('第 40 个斐波那契数是：', result); // 输出结果
};-
// fibonacciWorker.js self.onmessage = function(event) { const n = event.data; const result = fibonacci(n); self.postMessage(result); }; function fibonacci(n) { if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); } -
性能优势：将斐波那契数列的计算放到 Web Worker 中执行，不会阻塞主线程，页面的其他操作仍然可以正常进行。即使计算时间较长，也不会导致页面卡顿。
-
实际应用：Web Worker 可以用于处理各种后台任务，如数据加密解密、图像处理、复杂的数据分析等。通过将这些任务放到后台线程中执行，可以显著提高页面的响应性和用户体验。
9. 为 Web Worker 添加进度支持
9.1 Web Worker 进度支持的实现方式
为 Web Worker 添加进度支持是提升用户体验和任务管理能力的重要手段。通过在 Web Worker 中定期发送进度信息到主线程，可以实现对后台任务执行情况的实时监控和反馈。
-
定期发送进度信息：在 Web Worker 中，可以通过
setInterval或在任务执行的关键节点调用postMessage方法，向主线程发送进度信息。进度信息可以是一个简单的百分比值，也可以是一个包含更多细节的对象，例如已完成的任务数量、总任务数量等。
-
// worker.js self.onmessage = function(event) { const total = event.data; let completed = 0; const interval = setInterval(() => { completed += 10; // 模拟任务进度 if (completed <= total) { self.postMessage({ progress: completed, total: total }); } else { clearInterval(interval); self.postMessage({ progress: total, total: total, done: true }); } }, 1000); }; -
使用事件监听处理进度信息：在主线程中，通过监听
onmessage事件来接收 Web Worker 发送的进度信息，并根据这些信息更新页面上的进度条或其他进度显示元素。
-
const worker = new Worker('worker.js'); worker.postMessage(100); // 发送总任务量 worker.onmessage = function(event) { const { progress, total, done } = event.data; const progressBar = document.getElementById('progress-bar'); progressBar.value = progress; // 更新进度条 progressBar.max = total; if (done) { console.log('任务完成'); } };
9.2 在主线程中处理 Web Worker 进度反馈
在主线程中处理 Web Worker 的进度反馈是实现任务进度可视化的关键步骤。通过实时更新页面上的进度条或其他进度显示元素，可以为用户提供清晰的任务执行状态信息。
-
更新进度条：进度条是最常见的进度显示方式之一。通过设置进度条的
value和max属性，可以直观地展示任务的完成进度。 -
<progress id="progress-bar" value="0" max="100"></progress> -
动态更新进度信息：除了进度条，还可以通过动态更新页面上的文本或其他元素来展示进度信息。例如，可以在页面上显示已完成的任务数量、剩余时间等。
-
worker.onmessage = function(event) { const { progress, total, done } = event.data; const progressBar = document.getElementById('progress-bar'); const progressText = document.getElementById('progress-text'); progressBar.value = progress; progressBar.max = total; progressText.innerText = `已完成 ${progress} / ${total}`; if (done) { progressText.innerText = '任务完成'; } }; -
处理任务完成和错误：在主线程中，还需要处理任务完成和可能发生的错误。通过在
onmessage事件中检查进度信息中的done标志或错误信息，可以执行相应的操作，如显示完成提示或错误信息。 -
worker.onmessage = function(event) { const { progress, total, done, error } = event.data; const progressBar = document.getElementById('progress-bar'); const progressText = document.getElementById('progress-text'); if (error) { progressText.innerText = `发生错误：${error}`; return; } progressBar.value = progress; progressBar.max = total; progressText.innerText = `已完成 ${progress} / ${total}`; if (done) { progressText.innerText = '任务完成'; } };
通过为 Web Worker 添加进度支持，可以实现对后台任务的实时监控和反馈，提升用户体验和任务管理能力。
扫一扫
909
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
