vue实现js休眠

Vue 中实现 JavaScript 休眠的方法

在 Vue 中实现 JavaScript 休眠功能可以通过 setTimeout 结合 Promise 或 async/await 实现。以下是几种常见方法：

使用 Promise 和 setTimeout

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

在 Vue 组件中使用 async/await

export default {
  methods: {
    async delayedAction() {
      console.log('开始休眠');
      await sleep(2000); // 休眠2秒
      console.log('休眠结束');
    }
  }
}

直接使用 setTimeout

如果不需要 Promise 封装，可以直接使用原生 setTimeout：

setTimeout(() => {
  console.log('休眠结束');
}, 2000);

注意事项

• 在 Vue 生命周期钩子中使用时，确保在 mounted 或 created 等异步上下文中调用。
• 避免在 beforeDestroy 或 destroyed 钩子中使用休眠，可能导致内存泄漏。

替代方案

对于复杂场景，可以使用 requestAnimationFrame 或第三方库（如 lodash.debounce）实现更精确的延迟控制。