js怎么在函数里使用settimeout后再执行下面的代码，必须把需要后执行的放到settimeout里面吗？

Question

如下代码：当然是不行的。

const okPush=async ()=>{
  if(!data.dataForm.UserNo || !data.dataForm.UserName || !data.dataForm.RoleNo){
    ElMessage.error('登录账号、用户名、用户角色不能为空。')
    return false
  }
  if(data.addEditType==='addUser' && !data.dataForm.UserPassword){
    ElMessage.error('密码不能为空。')
    return false
  }
  console.log(data.addEditType)
  data.btnLoading=true;
 await  setTimeout(()=>{
      console.log('sss')
  },1000)
  const res=await accessApi[data.addEditType](data.dataForm).catch((e)=>{ElMessage.error(e);data.btnLoading=false;})
  if(res.Code===0){
    getUserData()
    data.dialogA=false
    data.btnLoading=false
  }else{
    ElMessage.error(res.Msg)
    data.btnLoading=false
  }
}

我想

await  setTimeout(()=>{
      console.log('sss')
  },1000)

执行完后再继续执行下面的，必须把后面的放到settimeout里面吗？？？

Answer 1

有异步的意识，知道需要 await，这很好。关于意识，推荐阅读：异步编程需要“意识”

但是注意 setTimeout 返回的是一个整数（Node 下是一个对象），它并不能等到 setTimeout 执行完成。需要把 setTimeout 封装成 Promise，代码也不难，就如 @holyPotato 所写。关于 await，推荐阅读：理解 JavaScript 的 async/await

不过这个简单封装的 Promise 是不能取消的。在指定时间内想取消这个定时任务就做不到了，因为没有取消的入口。关于取消的问题，推荐阅读：javascript - 可以中断的异步操作。这篇文章里甚至有 setTimeout 的封装实现。

Answer 2

 await new Promise((resolve) => {
  setTimeout(() => {
      console.log('sss')
      resolve()
    }, 1000)
})

Answer 3

// 用promise模拟封装一个睡眠函数
function sleep (millsecond: number) {
  return new Promise(function (resolve) {
    setTimeout(resolve, millsecond)
  })
}

// 等待1000毫秒后，执行之后代码
await sleep(1000)

// 继续之后的代码
var a = []

Answer 4

确实如果按照你这样写的话，不行。具体原因看边城大佬的回复。

如果要做到可以配合 async/await 暂停，需要把 setTimeout 用 promise 包裹起来，或者单独封装成 Bestime 提供的 sleep 方法。

这样才可以成功等到 setTimeout 执行完毕后再执行后续业务代码。
async/await 的暂停需要 await 等待的方法返回一个 promise。这个可以从文档里面看到。

Answer 5

可以去了解一下js单线程背景下出现的event loop执行机制。node也有专门的文档介绍。