JavaScript setTimeout 怎么用
早上刚把热粥盛进碗里，我就想起要给手机定个10分钟后的闹钟——就像前端开发里的“延时执行”场景，咱们天天碰的 setTimeout，其实跟定闹钟、热粥都能对上。很多刚接触前端的朋友，刚接触这个API总觉得绕，其实拆成生活化的小事，一学就懂。
先搞懂 setTimeout 的“核心逻辑”
你定闹钟的时候，不会立刻响起，而是等你设的时间到了才响；setTimeout 也是一样：它是“告诉浏览器，多少毫秒后，把我要做的事排进任务列表里”。
举个最生活化的例子：你煮面，水开需要20秒，你可以在水开前1秒设个 setTimeout，让它“20秒后喊我关火”。对应到代码里就是 setTimeout(关火, 20000)——这里的20000是毫秒，1秒=1000毫秒，所以20000就是20秒。
但这里有个容易踩的坑：setTimeout 只是“通知浏览器‘我等会儿要做’”，不是绝对“到点就立刻做”。比如你刚在写代码，浏览器后台堆了一堆待处理的事（比如刚加载完图片、刚响应了鼠标点击），就算到了20秒，也得等这些事做完，才能执行你要的操作——就像你正忙着擦桌子，闹钟响了得等你擦完这一下才会停，没法立刻跳出来。
最常用的写法：三种场景全覆盖
setTimeout 就像个“延时提醒小助手”，日常开发里常用的就三种写法，对应三种生活场景，记起来特别快：
第一种是“只做一次的简单提醒”，就是你最常用的基础写法。比如你做一个电商页面，用户提交订单后，要等2秒弹出“支付中，请稍候”的提示，写完就消失，不用重复。代码就是：
`javascript
// 2秒后执行匿名函数，弹出提示
setTimeout(() => {
alert('支付中，请稍候');
}, 2000);
`
这个箭头函数就是“要做的事”，2000就是延时的毫秒数，完全对应“定个2秒后的提醒”。
第二种是“延时后带参数”，比如你煮面的例子，关火需要加多少水量？总不能只喊“关火”，得说“关火，加2碗水”。对应到代码里，setTimeout 允许给要执行的函数传参数，比如你有个函数叫 setCookTime(锅具, 水量)，要等20秒后执行，就可以写成：
`javascript
function setCookTime(pot, water) {
console.log(给${pot}加${water}，关火);
}
// 20秒后执行这个函数，传参是“铁锅”和“2碗水”
setTimeout(setCookTime, 20000, '铁锅', '2碗水');
`
这里后面的两个参数，就是传给 setCookTime 的参数，就像你给闹钟备注了“到点喊我关火，还要加2碗水”。
第三种是“中途取消延时”，比如你定了10分钟后的闹钟，突然想起不用定了，直接在闹钟界面删掉就行。setTimeout 也能取消，只要给它设个“唯一编号”，这个编号就像闹钟的ID，删的时候用它就行：
`javascript
// 给setTimeout设个变量存ID，就像给闹钟编个号
const timerId = setTimeout(() => {
console.log('5秒后要提醒你看消息');
}, 5000);
// 突然不想提醒了，用clearTimeout取消，就像删闹钟
clearTimeout(timerId);
`
这个“编号”是 setTimeout 执行后返回的数字，只要存好，随时可以用 clearTimeout 叫停，避免做没必要的操作，就像你突然取消煮面，就不用等20秒的提醒了。
日常开发里的实用小技巧
很多人用 setTimeout 只会写固定延时，但其实结合实际场景，有两个小细节能少踩坑：
第一个是“不要用0毫秒当延时”，你可能觉得写 setTimeout(做某事, 0) 就是立刻执行，其实不是——它只是把这件事放到当前任务的最后，等所有当前要做的事都做完才执行，就像你说“先把我手里的活干完，再做这个”，不是“立刻做”。只有特殊场景才用这个，比如要等页面完全加载完再执行某段代码，平时别随便写0。
第二个是“避免嵌套 setTimeout”，比如你想每隔1秒做一件事，别写成 setTimeout(() => { setTimeout(...) }, 1000)，这种嵌套会让时间不准，就像你设了“1秒后提醒，提醒后再设1秒”，中间会因为其他任务延迟。应该用专门的 setInterval，不过偶尔用 setTimeout 做一次性延时，完全够用。
其实 setTimeout 一点都不复杂，本质就是“告诉浏览器，等我给的时间到了，把我要做的事记下来，排到后面执行”。不管是定闹钟、煮面，还是写代码，核心都是“提前规划，按需要触发”，把这些生活化的逻辑对应上，用起来就顺手了。