【最佳实践】核心代码 —— sleep 函数
function sleep(time) { return new Promise((resolve) => setTimeout(resolve, time)); }
使用演示 —— 需 async/await
单次延时
async function test() { print("开始执行代码"); // 使用 async/await 语法，参数为需要延迟的时间，单位为毫秒 await sleep(1000); print("通过 sleep 延迟1秒后执行"); print("结束执行代码"); } test();
执行结果
开始执行代码————当前时间：2024年5月23日9时50分15秒 通过 sleep 延迟1秒后执行————当前时间：2024年5月23日9时50分16秒 结束执行代码————当前时间：2024年5月23日9时50分16秒
串行延时
async function test() { print("开始执行代码"); await sleep(1000); print("通过 sleep 延迟1秒后执行"); await sleep(1000); print("通过 sleep 又延迟1秒后执行"); await sleep(1000); print("通过 sleep 再延迟1秒后执行"); print("结束执行代码"); } test();
执行结果
开始执行代码————当前时间：2024年5月23日10时47分36秒 通过 sleep 延迟1秒后执行————当前时间：2024年5月23日10时47分37秒 通过 sleep 又延迟1秒后执行————当前时间：2024年5月23日10时47分38秒 通过 sleep 再延迟1秒后执行————当前时间：2024年5月23日10时47分39秒 结束执行代码————当前时间：2024年5月23日10时47分39秒
附赠 print 的代码
function print(info) { let dt = new Date(); var y = dt.getFullYear(); var mt = dt.getMonth() + 1; var day = dt.getDate(); var h = dt.getHours(); //获取时 var m = dt.getMinutes(); //获取分 var s = dt.getSeconds(); //获取秒 let str = "当前时间：" + y + "年" + mt + "月" + day + "日" + h + "时" + m + "分" + s + "秒"; console.log(info + "————" + str); }
setTimeout 和你想的不一样
js 延时执行代码的第一想法是使用 setTimeout，但它的效果可能和你想的不一样。
function test() { print("开始执行代码"); setTimeout(() => { print("1秒的setTimeout"); }, 1000); print("结束执行代码"); } test();
执行结果
开始执行代码————当前时间：2024年5月23日9时55分1秒 结束执行代码————当前时间：2024年5月23日9时55分1秒 1秒的setTimeout————当前时间：2024年5月23日9时55分2秒
可见 setTimeout 是 js 的一种异步机制，它并不会阻塞同步代码的执行，具体的执行机制，详见 js【深度解析】代码的执行顺序
https://blog.csdn.net/weixin_41192489/article/details/136591137
setTimeout 仅适用于简单的、一次性延迟，若需要实现串行延时，还需要使用递增时长来实现（需自行计算累计时长，逻辑不够直观）
function test() { print("开始执行代码"); setTimeout(() => { print("1秒的setTimeout"); }, 1000); setTimeout(() => { print("2秒的setTimeout"); }, 2000); setTimeout(() => { print("3秒的setTimeout"); }, 3000); print("结束执行代码"); } test();
【不推荐】while 循环阻塞实现延时
function sleep(delay) { var start = new Date().getTime(); while (new Date().getTime() - start < delay) { continue; } }
function test() { print("开始执行代码"); sleep(1000); print("通过 sleep 延迟1秒后执行"); print("结束执行代码"); } test();
执行结果
开始执行代码————当前时间：2024年5月23日10时9分29秒 通过 sleep 延迟1秒后执行————当前时间：2024年5月23日10时9分30秒 结束执行代码————当前时间：2024年5月23日10时9分30秒
这是最传统的实现 sleep 的方法，确实实现了延时，但会阻塞整个线程，可能会冻结UI或导致程序崩溃，强烈不推荐！
