js实现settime

setTimeout 的基本用法

setTimeout 是 JavaScript 中用于延迟执行代码的方法。它接受一个回调函数和一个延迟时间（毫秒），在指定时间后执行回调函数。

setTimeout(() => {
  console.log('这段代码将在 1 秒后执行');
}, 1000);

清除 setTimeout

setTimeout 返回一个定时器 ID，可以用于清除定时器。使用 clearTimeout 可以取消尚未执行的定时器。

const timerId = setTimeout(() => {
  console.log('这段代码不会执行');
}, 1000);

clearTimeout(timerId);

传递参数给回调函数

setTimeout 允许传递额外的参数给回调函数，这些参数会作为回调函数的参数。

setTimeout((name, age) => {
  console.log(`姓名: ${name}, 年龄: ${age}`);
}, 1000, '张三', 25);

使用箭头函数

箭头函数可以简化 setTimeout 的回调写法，同时避免 this 绑定问题。

const obj = {
  name: '李四',
  greet: function() {
    setTimeout(() => {
      console.log(`你好, ${this.name}`);
    }, 1000);
  }
};

obj.greet();

递归 setTimeout

递归调用 setTimeout 可以实现类似 setInterval 的重复执行效果，但能更精确控制每次执行的间隔。

function repeat() {
  console.log('每 1 秒执行一次');
  setTimeout(repeat, 1000);
}

setTimeout(repeat, 1000);

浏览器和 Node.js 中的差异

在浏览器中，setTimeout 的最小延迟时间通常为 4ms。Node.js 中则没有这个限制，但实际延迟可能受事件循环影响。

// 浏览器中最小延迟演示
setTimeout(() => {
  console.log('即使设置为 0，实际延迟至少 4ms');
}, 0);

替代方案 requestAnimationFrame

对于动画场景，requestAnimationFrame 比 setTimeout 更适合，它能与浏览器刷新率同步。

function animate() {
  console.log('动画帧');
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);