延时执行函数封装

问题

封装一个函数，参数是定时器的时间，支持 .then 执行回调。

解答

基础实现

// 延时函数，返回 Promise
function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

// 使用示例
delay(1000).then(() => {
  console.log('1秒后执行');
});

支持传递返回值

// 支持传递值的延时函数
function delay(ms, value) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(value), ms);
  });
}

// 使用示例
delay(1000, 'hello').then((val) => {
  console.log(val); // 'hello'
});

配合 async/await 使用

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

// async/await 方式
async function example() {
  console.log('开始');
  await delay(1000);
  console.log('1秒后');
  await delay(2000);
  console.log('再过2秒');
}

example();

支持取消的版本

function delay(ms) {
  let timerId;
  
  const promise = new Promise((resolve, reject) => {
    timerId = setTimeout(resolve, ms);
  });
  
  // 添加取消方法
  promise.cancel = () => {
    clearTimeout(timerId);
  };
  
  return promise;
}

// 使用示例
const timer = delay(5000);
timer.then(() => console.log('执行'));

// 2秒后取消
setTimeout(() => {
  timer.cancel();
  console.log('已取消');
}, 2000);

关键点

• 返回 Promise 对象，使函数支持 .then 链式调用
• setTimeout 放在 Promise 构造函数内部执行
• 定时器到期后调用 resolve 完成 Promise
• 可扩展支持传递值、取消功能
• 配合 async/await 可实现同步风格的延时代码