当前位置：首页 > news >正文

JavaScript实现倒计时函数

news 来源：原创 2025/6/22 1:22:37

函数代码

/**
 * 倒计时
 * @param {function} callback 回调函数，参数为当前剩余时间(time)
 * @param {number} count 倒计时开始时间(s)
 * @param {number} interval 间隔时间(ms)
 */
function countDown(callback, count = 60, interval = 1000) {
  callback(count);
  const startTime = Date.now();
  const timer = setTimeout(() => {
    const endTime = Date.now();
    const diffTime = endTime - startTime;
    const time = count - Math.floor(diffTime / 1000);
    clearTimeout(timer);
    if (time <= 0) callback(0);
    else countDown(callback, time);
  }, interval);
}

// 使用例子
countDown((time) => {
  console.log(time)
  // this.count = time;
});

解释

为什么写一个倒计时函数，因为在写vue项目中，出现多次需要倒计时的情况，比如说登录页手机验证码登录，修改密码发送验证码等，也就是需要倒计时验证码的时候，均需要该函数（每个页面都写了），就想从中抽离出来使用（心里的诟病，一直想抽离）。
刚开始抽离没有思路，后面灵光一闪，使用回调函数实现。
函数中，setTimeout函数里面，为什么不直接time-1或者time-interval，因为这样的减分可能会存在误差(概率不大)，而用系统时间,则几乎不会存在误差。