js实现timeout
实现 JavaScript 的 Timeout
JavaScript 提供了 setTimeout 方法来实现延迟执行代码的功能。以下是一个基本的实现示例：
setTimeout(function() {
console.log('这段代码将在 3 秒后执行');
}, 3000);清除 Timeout
如果需要取消尚未执行的 timeout，可以使用 clearTimeout 方法：
const timeoutId = setTimeout(() => {
console.log('这段代码不会执行');
}, 2000);
clearTimeout(timeoutId);带参数的 Timeout
可以向回调函数传递参数：
setTimeout(function(param1, param2) {
console.log(param1, param2);
}, 1000, '参数1', '参数2');使用箭头函数
现代 JavaScript 更推荐使用箭头函数语法：
setTimeout(() => {
console.log('使用箭头函数的 timeout');
}, 1500);递归 Timeout 实现间隔执行
虽然 setInterval 更适合间隔执行，但也可以用 setTimeout 实现：
function delayedLoop(count) {
if (count <= 0) return;
setTimeout(() => {
console.log(`执行次数: ${count}`);
delayedLoop(count - 1);
}, 1000);
}
delayedLoop(5);实际应用示例
在网页开发中常见的应用场景：
// 延迟显示元素
setTimeout(() => {
document.getElementById('message').style.display = 'block';
}, 2000);
// 用户停止输入后执行搜索
let searchTimeout;
document.getElementById('search').addEventListener('input', () => {
clearTimeout(searchTimeout);
searchTimeout = setTimeout(() => {
performSearch();
}, 500);
});注意事项
- 定时器的时间不能保证精确，会受到浏览器事件循环的影响
- 最小延迟时间在大多数浏览器中是4ms
- 在后台标签页中，定时器可能会被限制执行频率
- 大量定时器可能影响性能
