使用闭包对setTimeout进行简单封装避免出错

2023年6月10日下午8:40 • JavaScript

对于JavaScript定时器setTimeout，常常在一些复杂的场景下使用，但由于其特性，在使用过程中，可能会出现回调函数中的this关键字指向不明的问题，或者定时器句柄无法被清除的问题等。这时，我们可以使用闭包对setTimeout进行简单的封装，以避免出错。下面是具体的攻略：

1. 封装setTimeout

首先，我们要封装setTimeout函数。可以定义一个setTimeoutWrapper函数，该函数需要接收两个参数，第一个参数是要执行的回调函数，第二个参数是时间间隔。在该函数中，我们使用闭包，把回调函数和计时器进行保存。具体实现代码如下：

function setTimeoutWrapper(callback, interval) {
  let timerId = null;

  function timeoutFn() {
    timerId = setTimeout(timeoutFn, interval);
    callback();
  }

  timerId = setTimeout(timeoutFn, interval);

  // 返回清除定时器句柄的函数
  return function() {
    clearTimeout(timerId);
  };
}

在上述代码中，我们定义了一个timeoutFn函数，该函数用来递归调用setTimeout函数，从而实现了定时器。定时器的id存储在timerId变量中，便于清除。

该函数返回了一个函数，用来清除定时器。在JavaScript中，setTimeout函数返回的是一个计时器句柄，可以用clearTimeout函数来清除。因此，我们在setTimeoutWrapper函数中返回了一个函数，该函数调用clearTimeout，以清除定时器。

2. 示例：定时打印

现在，我们可以使用该函数来实现一些复杂的定时任务。比如，我们可以使用该函数来定时打印一些内容。具体实现代码如下：

function printMsg(msg) {
  console.log(msg);
}

const clearTimer = setTimeoutWrapper(function() {
  printMsg('Hello World!');
}, 1000);

// 5秒后清除定时器
setTimeout(function() {
  clearTimer();
}, 5000);

在该代码段中，我们定义了printMsg函数用于打印信息。然后，我们调用setTimeoutWrapper函数，设置了要执行的回调函数和时间间隔。该函数返回了一个清除定时器的函数，并将其赋值给了clearTimer变量。

随后，我们又使用了setTimeout函数，在5秒后调用了clearTimer函数，以清除定时器。因此，该定时器只会执行5次。

3. 示例：动态更新

另一个使用setTimeoutWrapper函数的例子是实时更新页面内容。比如，我们可以更新一个时钟，每秒钟更新一次。具体的实现代码如下所示：

<div id="clock">00:00:00</div>

<script>
function updateClock() {
  const now = new Date();
  const hours = now.getHours();
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();
  const timeString = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  document.getElementById('clock').textContent = timeString;
}

setIntervalWrapper(updateClock, 1000);
</script>

在该代码段中，我们定义了一个updateClock函数，用于更新页面中一个时钟的内容。然后，我们调用setIntervalWrapper函数，设置了要执行的回调函数和时间间隔。由于该函数返回了一个清除定时器的函数，因此我们在该代码段中没有使用setTimeout函数。

在上面的代码中，我们使用了字符串模板，将时间分别格式化为“小时：分钟：秒”的格式，并将其作为文本插入到了页面中一个id为“clock”的div元素中，从而实现了动态更新。