js实现timeout
实现 setTimeout 的基本用法
在 JavaScript 中，setTimeout 用于在指定的延迟时间后执行一次函数。基本语法如下：
setTimeout(function, delay, [arg1], [arg2], ...);其中 function 是要执行的函数，delay 是延迟的毫秒数，可选参数 arg1, arg2 等会传递给函数。
setTimeout(() => {
console.log('This message appears after 2 seconds');
}, 2000);清除 setTimeout
setTimeout 返回一个定时器 ID，可以用于取消尚未执行的定时任务。
const timerId = setTimeout(() => {
console.log('This will not run');
}, 1000);
clearTimeout(timerId);传递参数给回调函数
可以通过 setTimeout 的额外参数将数据传递给回调函数。
setTimeout((message) => {
console.log(message); // Outputs: "Hello after 3 seconds"
}, 3000, 'Hello after 3 seconds');使用箭头函数简化代码
箭头函数可以简化 setTimeout 的回调写法。
setTimeout(() => console.log('Simplified with arrow function'), 1500);递归实现间隔执行
虽然 setInterval 更适合间隔执行，但 setTimeout 也可以通过递归实现类似效果。
function repeatEverySecond() {
console.log('Recursive timeout at', new Date().toLocaleTimeString());
setTimeout(repeatEverySecond, 1000);
}
repeatEverySecond();处理 this 绑定问题
当使用对象方法作为回调时，需要注意 this 的绑定问题。
const obj = {
value: 10,
showValue() {
console.log(this.value); // Without bind, this would be undefined
}
};
// 错误方式
setTimeout(obj.showValue, 1000); // Outputs: undefined
// 正确方式
setTimeout(obj.showValue.bind(obj), 1000); // Outputs: 10实现带取消功能的 timeout
可以封装一个更可控的 timeout 函数，支持取消。
function cancellableTimeout(fn, delay) {
const timerId = setTimeout(fn, delay);
return {
cancel: () => clearTimeout(timerId)
};
}
const task = cancellableTimeout(() => {
console.log('Executed after delay');
}, 2000);
// 如果需要取消
// task.cancel();使用 Promise 封装 setTimeout
可以将 setTimeout 封装成 Promise，便于在异步流程中使用。
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function run() {
console.log('Start');
await delay(1000);
console.log('After 1 second');
}
run();实现精确延迟
由于 JavaScript 是单线程的，长时间运行的代码可能会延迟 setTimeout 的执行。
const start = Date.now();
setTimeout(() => {
const end = Date.now();
console.log(`Actual delay: ${end - start}ms`); // 可能大于设置的延迟
}, 100);
// 模拟长时间运行的任务
for (let i = 0; i < 1000000000; i++) {}浏览器与 Node.js 的差异
在浏览器中，最小延迟通常为 4ms（根据 HTML5 规范），而 Node.js 没有这个限制。
// 在浏览器中，以下代码的实际延迟至少为 4ms
setTimeout(() => {
console.log('Browser minimum delay');
}, 0);
