巧用延迟技巧，解锁 JavaScript 编程新体验

2024-01-13 22:22:55

在 JavaScript 中实现延迟：实用指南

在编程的世界里，暂停程序执行一段时间的能力往往是至关重要的。然而，JavaScript 却没有内置的 sleep 函数，这给开发人员带来了一个挑战。别担心，本文将提供几种巧妙的技术，让您能够在 JavaScript 代码中轻松实现延迟，满足各种编程需求。

技巧一：setTimeout

setTimeout 是 JavaScript 中最常用的延迟函数。它接受两个参数：延迟时间和回调函数。延迟时间指定需要延迟的毫秒数，回调函数指定延迟结束后要执行的代码。

setTimeout(function() {
  console.log("延迟 1 秒后执行");
}, 1000);

技巧二：setInterval

setInterval 与 setTimeout 类似，但它不是只执行一次，而是每隔指定时间间隔就执行一次回调函数。

setInterval(function() {
  console.log("每隔 1 秒执行一次");
}, 1000);

技巧三：Promise

Promise 是 JavaScript 中的一种异步编程方式。我们可以使用 Promise 来实现延迟。

const delay = (ms) => {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
};

delay(1000).then(() => {
  console.log("延迟 1 秒后执行");
});

技巧四：async/await

async/await 是 JavaScript 中的另一种异步编程方式。它允许我们使用同步的写法来处理异步操作。

const delay = (ms) => {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
};

async function main() {
  await delay(1000);
  console.log("延迟 1 秒后执行");
}

main();

技巧五：Web Workers

Web Workers 是 JavaScript 中一种多线程编程方式。我们可以使用 Web Workers 来实现延迟，而不会阻塞主线程。

const worker = new Worker("worker.js");

worker.postMessage({
  type: "delay",
  ms: 1000
});

worker.onmessage = (e) => {
  console.log("延迟 1 秒后执行");
};

技巧六：Generator

Generator 是 JavaScript 中一种特殊的函数，它可以暂停并恢复执行。我们可以使用 Generator 来实现延迟。

function* delay(ms) {
  yield new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

const main = async () => {
  yield* delay(1000);
  console.log("延迟 1 秒后执行");
};

main();