js 代替 setInterval

在 JavaScript 中，我们可以使用 `setInterval()` 方法来实现定时器功能。但是，使用 `setInterval()` 方法存在一些问题，比如：

- 可能会出现任务重叠的情况，导致任务执行时间延迟。
- 可能会因为浏览器或电脑性能的问题，导致定时器的间隔时间不准确。

为了解决这些问题，我们可以使用一些替代方案来实现定时器功能。

1. 使用 `setTimeout()` 递归调用

我们可以使用 `setTimeout()` 方法来实现递归调用，从而达到定时器的效果。在每次递归调用时，可以根据具体的情况来调整下一次调用的时间间隔。

function mySetInterval(fn, interval) {
  setTimeout(function() {
    fn();
    mySetInterval(fn, interval);
  }, interval);
}

// 使用示例
mySetInterval(function() {
  console.log('Hello world!');
}, 1000);

2. 使用 `requestAnimationFrame()` 方法

`requestAnimationFrame()` 方法是一个专门用来实现动画效果的方法，它可以在每次浏览器重绘之前执行一段代码。因此，我们可以利用这个方法来实现定时器的效果。

function mySetInterval(fn, interval) {
  let start = Date.now();
  function loop() {
    let now = Date.now();
    if (now - start >= interval) {
      fn();
      start = now;
    }
    requestAnimationFrame(loop);
  }
  requestAnimationFrame(loop);
}

// 使用示例
mySetInterval(function() {
  console.log('Hello world!');
}, 1000);

3. 使用 `MessageChannel` 实现

`MessageChannel` 是 HTML5 新增的一个 API，可以用来创建一个双向通道，可以在两个窗口之间传递消息。我们可以利用它的特性来实现定时器的效果。

function mySetInterval(fn, interval) {
  let channel = new MessageChannel();
  let timer = null;
  channel.port2.onmessage = function() {
    fn();
    timer = setTimeout(function() {
      channel.port1.postMessage(null);
    }, interval);
  };
  timer = setTimeout(function() {
    channel.port1.postMessage(null);
  }, interval);
}

// 使用示例
mySetInterval(function() {
  console.log('Hello world!');
}, 1000);

以上三种方法都可以替代 `setInterval()` 方法来实现定时器的效果，但是它们各自的实现方式有所不同，具体使用时需要根据实际情况选择合适的方法。