内容摘要：JS里让代码“等一秒再跑”，最土的办法是setTimeout。你写setTimeout(() => { ... }, 1000)，回调里的东西就老老实实等上一秒。但真在项目里这么干，很快会撞上一堵墙—

JS里让代码“等一秒再跑”，延迟最土的秒往办法是setTimeout。你写setTimeout(() => { ... },下执行 1000)，回调里的延迟东西就老老实实等上一秒。但真在项目里这么干，秒往很快会撞上一堵墙——回调嵌套。下执行比如你先等一秒拿用户信息，延迟再等一秒查他的秒往订单，再等一秒算优惠，下执行代码就变成圣诞树，延迟一层套一层，秒往读起来脑仁疼。下执行

有个真实案例。延迟我去年接手一个后台管理系统，秒往登录后要依次加载用户头像、下执行菜单权限、消息列表。前任工程师写了三个setTimeout串在一起，每个里面再发Ajax请求。结果用户点登录按钮，页面白屏三秒，期间啥反馈都没有。后来我改成async/await配一个delay函数，代码立刻从“俄罗斯套娃”变成“流水账”，每一行都平铺直叙，读起来跟讲故事一样。

那个delay函数其实就一行：const delay = ms => new Promise(resolve => setTimeout(resolve, ms))。然后你就能写await delay(1000)，像在代码里按了个暂停键。这比直接塞setTimeout干净在哪儿？——它把“等待”这个动作从业务逻辑里剥出来了。你不需要在一堆回调里找“到底哪段代码在等”，而是清清楚楚看到：哦，这里暂停一秒，然后往下走。

但别急着把所有延迟都换成这个。有个坑你得知道：await delay(1000)是“死等”，不管页面是不是已经隐藏了、用户是不是切走了标签页，它都雷打不动等满一秒。要是做轮询接口，用户切到别的标签页，浏览器会节流定时器，实际等待时间可能变成两三秒。这时候你就得用requestAnimationFrame或者监听visibilitychange，搞点“活等”——页面可见才计时，隐藏了就暂停。这种细节，新手往往栽跟头。

还有种情况，延迟不是固定一秒，而是“等某个条件成立”。比如等一个图片加载完，再执行动画。你用setTimeout写死1000毫秒，网络慢点就露馅，图片没加载完动画已经开始，画面卡顿。正确做法是绑img.onload事件，或者用Promise把加载过程包起来。固定延迟只是兜底方案，真正常用的是“事件驱动”。

说到底，setTimeout是底层工具，delay函数是糖衣，而真正的“延迟”概念应该长在你脑子里——你得想清楚：这一秒是给用户看的（比如loading动画最少展示一秒，避免闪烁），还是给服务器喘气的（比如失败重试前等一秒），或者是给浏览器渲染留时间的（比如DOM改动后等一帧）。目的不同，实现方式完全不一样。

我见过最离谱的写法，是有人为了“让页面看起来流畅”，在click事件里await delay(500)再跳转。结果用户点完按钮，界面半天没反应，以为没点中，又点了一次，最后跳了两次页面。这哪是延迟，这是给用户添堵。延迟这玩意儿，用对了是润滑剂，用错了就是绊脚石。你写之前先问自己：这个等待，用户能感知到吗？感知到了会觉得合理吗？要是答案是否定的，趁早删了那行代码。