Angular中如何在setTimeout代码块的两行代码间添加额外延时？

API 探路者

2026-10-6

setTimeout回调内部新增延时的正确实现方式

你直接调用delay()不生效的核心原因是JavaScript没有内置全局同步延时方法，且单线程事件循环机制不支持直接的同步阻塞式延时，这类写法会阻塞页面主线程的渲染和交互，属于不推荐的实现方式。

以下是两种可直接运行的正确实现方案：

方案1：嵌套setTimeout实现

无需额外封装，兼容所有运行环境，适合仅需要单次额外延时的场景：

setTimeout(() => {
  this.messageService.add({
    severity: 'success', summary: 'Yay',
    detail: 'Successfully done'
  });
  console.log('here1');
  // 嵌套一层setTimeout实现1s延时
  setTimeout(() => {
    console.log('here2'); // 1s后执行
  }, 1000);
}, 1500);

方案2：async/await配合Promise封装延时（更推荐）

封装通用延时方法后可复用，写法符合线性逻辑，没有回调嵌套问题，可读性更高：

// 通用异步延时方法，全局封装一次即可多次调用
const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

setTimeout(async () => {
  this.messageService.add({
    severity: 'success', summary: 'Yay',
    detail: 'Successfully done'
  });
  console.log('here1');
  await delay(1000);
  console.log('here2'); // 1s后执行
}, 1500);