js如何延时
最新回答
欧尼酱
2022-02-12 15:58:22
在 JavaScript 中，实现延时执行的核心方法是 setTimeout 和 setInterval，以下是具体用法和注意事项：
1. 延迟单次执行：setTimeout- 作用：在指定毫秒后执行一次回调函数。
- 语法：setTimeout(callback, delay)
- 示例：// 延迟 2 秒后执行const timeoutId = setTimeout(() => { console.log("2 秒后执行");}, 2000);// 可取消延迟（在触发前调用）clearTimeout(timeoutId);
- 关键点：
返回唯一的 timeoutId，可用于 clearTimeout 取消。
回调函数中的 this 默认指向全局对象（如 window），需用箭头函数或 .bind() 修正。
- 作用：按固定间隔重复执行回调函数，需手动清除。
- 语法：setInterval(callback, interval)
- 示例：// 每 1 秒执行一次const intervalId = setInterval(() => { console.log("每秒执行一次");}, 1000);// 10 秒后停止setTimeout(() => { clearInterval(intervalId); console.log("已停止重复执行");}, 10000);
- 关键点：
返回 intervalId，通过 clearInterval 停止。
若回调执行时间超过间隔，会导致堆积（需确保回调高效）。
- 作用：提前终止未执行的延迟或重复任务。
- 示例：const timeoutId = setTimeout(() => console.log("不会执行"), 1000);clearTimeout(timeoutId); // 立即取消const intervalId = setInterval(() => console.log("重复中"), 300);clearInterval(intervalId); // 停止重复
- 适用场景：需要更灵活的异步控制（如等待多个延时）。
- 示例：function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms));}async function run() { console.log("开始"); await delay(1500); // 等待 1.5 秒 console.log("1.5 秒后");}run();
- 精度问题：浏览器最小延迟通常为 4ms（HTML5 标准），即使设为 0 也会排队。
- 内存泄漏：未清除的 setInterval 会持续占用资源，需在组件卸载或页面离开时清理。
- 异步上下文：延时回调中的错误需用 try/catch 或 .catch() 处理（Promise 场景）。
- 单次延迟 → setTimeout + clearTimeout
- 重复执行 → setInterval + clearInterval
- 现代替代 → async/await + Promise 实现链式控制
根据需求选择合适方法，并始终记得清理不再需要的定时器！
热门标签
