vue实现js休眠

Vue 中实现 JavaScript 休眠

在 Vue 中实现 JavaScript 休眠通常需要使用异步方式，以避免阻塞主线程。以下是几种常见方法：

使用 setTimeout 和 Promise

通过 setTimeout 结合 Promise 可以实现异步休眠，适用于 Vue 的方法或生命周期钩子中。

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

// 在 Vue 方法中使用
async function someMethod() {
  console.log('开始休眠');
  await sleep(2000); // 休眠 2 秒
  console.log('休眠结束');
}

在 Vue 组件中使用

在 Vue 组件的 methods 中定义休眠函数，并在需要的地方调用。

export default {
  methods: {
    sleep(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
    },
    async fetchData() {
      await this.sleep(1000); // 休眠 1 秒
      // 继续执行其他逻辑
    }
  }
}

使用 async/await 优化代码

在 Vue 的异步操作中（如 API 调用），可以通过 async/await 结合休眠函数控制执行流程。

export default {
  async mounted() {
    await this.sleep(500); // 休眠 0.5 秒
    this.loadData();
  },
  methods: {
    sleep(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
    },
    loadData() {
      // 加载数据逻辑
    }
  }
}

注意事项

• 避免在主线程中直接使用同步休眠（如 while 循环），否则会导致页面卡死。
• 休眠时间过长可能影响用户体验，需谨慎设置时长。
• 在 Vue 3 的 Composition API 中，逻辑与上述类似，只需将函数定义在 setup 中。