封装一个闭包倒计时

封装一个只依赖js原生方法的倒计时

/** 闭包倒计时 */
countDownFun = (time = MINUTE) => {
  return function loop({ realTimeCallback, endCallback }) {
    realTimeCallback(time);
    setTimeout(() => {
      time = time - 1;
      if (time < 0) { endCallback(); return; }
      loop({ realTimeCallback, endCallback });
    }, 1000);
  };
}

/** 调用 */
countDownFun(MINUTE)({
  realTimeCallback: time => {
    // 倒计时中
  },
  endCallback: () => {
    // 倒计时结束
  },
});

这段代码定义了一个名为 countDownFun 的闭包倒计时函数，它可以用来实现从给定时间（默认为 MINUTE 单位）到零的倒计时功能。它接受一个可选的时间参数，并返回一个新的内部函数 loop，这个内部函数实现了实际的倒计时逻辑。

loop 函数接收两个回调函数作为参数：

1. realTimeCallback：每当秒数减少时调用，传入当前剩余的秒数。
2. endCallback：当倒计时结束时调用。

loop 函数的工作原理如下：

1. 首先，它调用 realTimeCallback 并传递初始时间。
2. 使用 setTimeout 定义一个延迟执行的函数，该函数将在1秒钟后触发。
3. 在定时器的回调函数中，时间减一，然后检查是否小于零。如果是，说明倒计时结束，调用 endCallback 并终止循环；否则，再次调用 loop 以继续倒计时。

调用 countDownFun(MINUTE) 会创建一个倒计时实例，传入 MINUTE 作为初始时间。接着，提供两个回调函数，一个处理倒计时过程中的实时时间更新，另一个处理倒计时结束后的情况。

这是一个典型的闭包示例，因为 loop 函数能够访问并修改外部 countDownFun 函数作用域内的 time 变量，即使在 setTimeout 回调中也是如此。这种特性使得倒计时可以在异步环境中正确工作。