使用 async/await 实现异步加载动画：JavaScript 教程

本文将介绍如何使用 JavaScript 中的 async/await 关键字，结合 Promise 对象，实现一个异步加载动画。通过创建一个 sleep 函数来模拟耗时操作，并在 OSLoad 函数中使用 await 关键字暂停执行，从而实现加载动画的显示，并在加载完成后执行后续代码，避免同步执行带来的阻塞问题。

异步加载动画的实现

在 JavaScript 中，处理异步操作的常见方式是使用回调函数或 Promise 对象。async/await 关键字是基于 Promise 的语法糖，可以使异步代码看起来更像同步代码，提高代码的可读性和可维护性。

1. 创建 sleep 函数

首先，我们需要创建一个 sleep 函数，该函数返回一个 Promise 对象，并在指定的时间后 resolve。这个函数可以用来模拟耗时操作，例如加载资源或执行复杂的计算。

立即学习“Java免费学习笔记（深入）”；

const sleep = ms => new Promise(r => setTimeout(r, ms));

这个 sleep 函数接受一个参数 ms，表示休眠的毫秒数。它返回一个 Promise 对象，该对象在 ms 毫秒后 resolve。

2. 使用 async/await 实现加载动画

接下来，我们可以使用 async/await 关键字来实现加载动画。async 关键字用于声明一个异步函数，await 关键字用于暂停异步函数的执行，直到一个 Promise 对象 resolve。

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

0

查看详情

async function OSLoad(OS = "", loadingTimeSeconds = 10) {
  var P = ["\", "|", "/", "-"];
  var x = 0;
  for (let lp = 0; lp < loadingTimeSeconds * 4; lp ++) {
    process.stdout.write(
      "
" + P[x++] + " Loading " + OS
    );
    x &= 3;
    await sleep(250);
  }
  process.stdout.write("
" + OS + " is loaded..");
}

在这个 OSLoad 函数中，我们首先定义了一个包含加载动画字符的数组 P。然后，我们使用一个 for 循环来迭代加载动画，并在每次迭代中使用 process.stdout.write 函数将加载动画字符输出到控制台。

关键在于 await sleep(250); 这行代码。它会暂停 OSLoad 函数的执行，直到 sleep(250) 返回的 Promise 对象 resolve，也就是 250 毫秒后。这样，我们就可以在控制台中看到加载动画的效果。

3. 调用 OSLoad 函数

最后，我们可以调用 OSLoad 函数来启动加载动画。

OSLoad('Fake OS 4.01');

这行代码会调用 OSLoad 函数，并传入操作系统的名称 Fake OS 4.01。加载动画将会在控制台中显示，并在加载完成后输出 Fake OS 4.01 is loaded..。

完整代码示例

//very simple console emulator
const pre = document.querySelector('pre');
const consoleBuffer = new Array(10).fill(' ');
let cpos = 0;
const consoleWrite = txt => {
  const s = txt.split('');
  for (const c of s) {
    if (c === '
') cpos = 0;
    else consoleBuffer[cpos++] = c;
  }
  pre.innerText = consoleBuffer.join('');
}
window.process = { stdout: { write: consoleWrite } };


//OS Loader
const sleep = ms => new Promise(r => { setTimeout(r, ms);});

async function OSLoad(OS = "", loadingTimeSeconds = 10) {
  var P = ["\", "|", "/", "-"];
  var x = 0;
  for (let lp = 0; lp < loadingTimeSeconds * 4; lp ++) {
    process.stdout.write(
      "
" + P[x++] + " Loading " + OS
    );
    x &= 3;
    await sleep(250);
  }
  process.stdout.write("
" + OS + " is loaded..");
}


OSLoad('Fake OS 4.01');

pre {
  height: 90vh;
  background-color: black;
  color: white;
}

注意事项

• async 函数必须返回一个 Promise 对象。如果 async 函数没有显式地返回一个 Promise 对象，那么它会隐式地返回一个已经 resolve 的 Promise 对象。
• await 关键字只能在 async 函数中使用。如果在非 async 函数中使用 await 关键字，会抛出一个语法错误。
• await 关键字会暂停 async 函数的执行，直到一个 Promise 对象 resolve。如果 Promise 对象 reject，那么 await 关键字会抛出一个异常。可以使用 try...catch 语句来捕获这个异常。

总结

通过使用 async/await 关键字，我们可以轻松地实现异步加载动画，并在加载完成后执行后续代码。这种方式可以避免同步执行带来的阻塞问题，提高用户体验。同时，async/await 关键字可以使异步代码看起来更像同步代码，提高代码的可读性和可维护性。掌握 async/await 的使用对于编写现代 JavaScript 代码至关重要。

以上就是使用 async/await 实现异步加载动画：JavaScript 教程的详细内容，更多请关注php中文网其它相关文章！