延时功夫: setTimeout&Promise&Async之铁三角协同

2023-12-02 00:53:20

在浩瀚的JavaScript异步编程江湖中，setTimeout、Promise和Async堪称三剑客，它们以独有的方式为开发人员提供各种灵活的异步编程解决方案。本文将对这三位剑客的招数特点进行剖析，并结合一些生动形象的示例，助你轻松理解和掌握它们，从而在异步编程的路上如鱼得水。

setTimeout：正规军延时功夫

首先登场的是setTimeout，它可谓是异步编程的正规军，以其简单直接的语法和广泛的适用性而著称。setTimeout可以让你在指定的时间后执行一个函数，就像一个闹钟一样。只需传入一个函数和一个延迟时间（以毫秒为单位），setTimeout就会在适当的时刻触发该函数的执行。

Promise：杂牌军延时高手

与setTimeout不同，Promise则显得有些另类，它以其独特的方式处理异步操作，就像一个神秘的杂牌军高手。Promise允许你将异步操作的结果与后续操作关联起来，从而避免了传统的回调地狱。你可以使用then()方法来指定当Promise被解析或拒绝时需要执行的操作。

Async：异步编程的利器

最后出场的是Async，它可以说是异步编程的利器，就像一个武林盟主，统领着JavaScript的异步编程世界。Async函数是一种特殊的函数，它可以让你使用await来暂停函数的执行，直到一个Promise被解析。这种写法使得异步代码看起来像同步代码一样清晰易懂。

三剑客协同作战，天下无敌

这三位剑客看似各显神通，但当它们协同作战时，却能发挥出更强大的威力。setTimeout可以用于在适当的时机触发Promise，而Promise可以用于处理异步操作的结果，最后Async可以将这些异步操作串联起来，形成一个流畅的异步编程流程。

示例一：模拟网络请求

让我们通过一个示例来感受三剑客的协同作战。假设我们想要模拟一个网络请求，并在请求完成后显示结果。首先，我们可以使用setTimeout来模拟网络请求的延迟，然后使用Promise来封装网络请求，最后使用Async函数来串联这两个操作。

// 模拟网络请求延迟
const delay = (ms) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, ms);
  });
};

// 模拟网络请求
const fetchUserData = () => {
  return new Promise((resolve, reject) => {
    delay(1000).then(() => {
      const userData = {
        name: "John Doe",
        email: "johndoe@example.com",
      };
      resolve(userData);
    });
  });
};

// 使用Async函数串联异步操作
const displayUserData = async () => {
  try {
    // 等待网络请求完成
    const userData = await fetchUserData();

    // 显示用户数据
    console.log(`Name: ${userData.name}`);
    console.log(`Email: ${userData.email}`);
  } catch (error) {
    // 处理网络请求失败的情况
    console.error(error);
  }
};

// 调用displayUserData函数
displayUserData();

示例二：实现图片预加载

接下来，我们再来看看一个图片预加载的示例。使用setTimeout可以将图片的加载过程异步化，而不影响页面的渲染。

const preloadImages = (imageUrls) => {
  // 创建一个Promise数组，用于存储每个图片的预加载过程
  const promises = imageUrls.map((url) => {
    return new Promise((resolve, reject) => {
      // 创建一个Image对象
      const image = new Image();

      // 监听图片加载完成事件
      image.onload = () => {
        resolve();
      };

      // 监听图片加载失败事件
      image.onerror = () => {
        reject();
      };

      // 设置图片的src属性，开始加载图片
      image.src = url;
    });
  });

  // 返回一个Promise，用于等待所有图片加载完成
  return Promise.all(promises);
};

// 使用setTimeout将图片预加载过程异步化
setTimeout(() => {
  preloadImages(imageUrls).then(() => {
    // 所有图片加载完成后，执行后续操作
    console.log("All images loaded successfully!");
  });
}, 0);