JavaScript实施倒计时器

在实际的应用程序中，一般用户不进行操作，在一定的时间内会自动的注销用户；让我们在应用程序中添加这个功能吧！

● 我们先简单的写一个计时器

const startLogOutTimer = function () {
  //设定时间
  let time = 100;

  //每秒调用一次计时器
  setInterval(() => {
    //在每次调用中，将剩余时间打印到 UI
    (labelTimer.textContent = time),
      //减少一秒
      time--;

    //当0秒时候，停止计时器并且注销用户
  }, 1000);
};

● 然后再用户登录的代码段中去调用它

    labelDate.textContent = new Intl.DateTimeFormat(
      currentAccount.locale,
      options
    ).format(now);
    // 清除输入字段
    inputLoginUsername.value = inputLoginPin.value = '';
    inputLoginPin.blur();

    startLogOutTimer();

    // 更新UI
    updateUI(currentAccount);
  }
});

● 但是这种明显不好看，我们以分钟和秒来倒计时会更加的好看

const startLogOutTimer = function () {
  //设定时间
  let time = 100;

  //每秒调用一次计时器
  const timer = setInterval(() => {
    //分钟部分，并且总以两位数，不够用0补
    const min = String(Math.trunc(time / 60)).padStart(2, 0);  
    //秒钟部分，并且总以两位数，不够用0补
    const sec = String(time % 60).padStart(2, 0);

    //在每次调用中，将剩余时间打印到 UI
    labelTimer.textContent = `${min}:${sec}`;
    //减少一秒
    time--;

    //当0秒时候，停止计时器并且注销用户
  }, 1000);
};

● 接着我们再time为0的时候注销用户并更新UI

const startLogOutTimer = function () {
  //设定时间
  let time = 10;

  //每秒调用一次计时器
  const timer = setInterval(() => {
    const min = String(Math.trunc(time / 60)).padStart(2, 0);
    const sec = String(time % 60).padStart(2, 0);

    //在每次调用中，将剩余时间打印到 UI
    labelTimer.textContent = `${min}:${sec}`;
    //减少一秒
    time--;

    //当0秒时候，停止计时器并且注销用户
    if (time === 0) {
      clearInterval(timer);
      labelWelcome.textContent = '请先登录';
      containerApp.style.opacity = 0;
    }
  }, 1000);
};

● 上面的代码就能够实现，当time为0的时候注销用户了，但是细心的你会发现，这个代码定时器并不是立即执行的，而是过一秒再执行，但是我们想要的是立即执行。

const startLogOutTimer = function () {
  const tick = function () {};
  const min = String(Math.trunc(time / 60)).padStart(2, 0);
  const sec = String(time % 60).padStart(2, 0);

  //在每次调用中，将剩余时间打印到 UI
  labelTimer.textContent = `${min}:${sec}`;
  //减少一秒
  time--;

  //当0秒时候，停止计时器并且注销用户
  if (time === 0) {
    clearInterval(timer);
    labelWelcome.textContent = '请先登录';
    containerApp.style.opacity = 0;
  }
};
//设定时间
let time = 10;

//每秒调用一次计时器
tick();
const timer = setInterval(tick, 1000);

● 这样我们将函数拿出来，再定时器之前直接调用它，它就会被立即执行

● 但是细心的我们又发现了一个问题，当时间为01的时候，就会更新UI，并不是等到00的时候

const startLogOutTimer = function () {
  const tick = function () {};
  const min = String(Math.trunc(time / 60)).padStart(2, 0);
  const sec = String(time % 60).padStart(2, 0);

  //在每次调用中，将剩余时间打印到 UI
  labelTimer.textContent = `${min}:${sec}`;

  //当0秒时候，停止计时器并且注销用户
  if (time === 0) {
    clearInterval(timer);
    labelWelcome.textContent = '请先登录';
    containerApp.style.opacity = 0;
  }
  //减少一秒
  time--;
};
//设定时间
let time = 10;

//每秒调用一次计时器
tick();
const timer = setInterval(tick, 1000);
//time-- 操作符是在 if 语句之前执行的。这意味着在检查 time 是否等于 0 之前，time 的值会被减少 1。因此，如果 time 的初始值为 10，当 time-- 在 if 语句之前执行时，它首先会减少到 9，然后在 if 语句中检查 time 是否等于 0。因为此时 time 不等于 0，所以不会执行 if 语句中的代码。

但是，如果你将 time-- 放在 if 语句之后执行，则在检查 time 是否等于 0 之前，time 的值不会被减少。这意味着在 if 语句中，time 的值仍然是 10，所以条件不成立，if 语句中的代码不会执行。

因此，如果你想要在 if 语句中在时间归零时执行代码，你应该将 time-- 放在 if 语句之后。

● 这样我们就实现再0秒的时候才注销用户

● 但是细心的小伙伴又发现了一个问题，当我们的在定时器期间，切换了用户登录，数字就会来回跳动，这是因为出现了两个计时器，我们应该切换用户登录时，将上一个定时器给关闭掉
先将定时器返回；

const startLogOutTimer = function () {
  const tick = function () {
    const min = String(Math.trunc(time / 60)).padStart(2, 0);
    const sec = String(time % 60).padStart(2, 0);

    //在每次调用中，将剩余时间打印到 UI
    labelTimer.textContent = `${min}:${sec}`;

    //当0秒时候，停止计时器并且注销用户
    if (time === 0) {
      clearInterval(timer);
      labelWelcome.textContent = '请先登录';
      containerApp.style.opacity = 0;
    }
    //减少一秒
    time--;
  };

  //设定时间
  let time = 30;

  //每秒调用一次计时器
  tick();
  const timer = setInterval(tick, 1000);

  return timer;   //将定时器返回，以便于后面可以调用到
};

再将timer设置为全局变量

let currentAccount, timer;

去判断定时器是否存在，如果存在的话就定制计时器，如果不存在就调用它

    labelDate.textContent = new Intl.DateTimeFormat(
      currentAccount.locale,
      options
    ).format(now);
    // 清除输入字段
    inputLoginUsername.value = inputLoginPin.value = '';
    inputLoginPin.blur();

    if (timer) clearInterval(timer);  //定时器有则停，无则调用
    timer = startLogOutTimer();

    // 更新UI
    updateUI(currentAccount);
  }
});

● 细心的小伙伴们又会发现一个问题，当我们来转账或贷款的时候计时器并不会重置，而我们只想在用户不进行任何操作的情况下一定时间内自动注销账号

clearInterval(timer); //清除之前的计时器
timer = startLogOutTimer(); //将计时器重新执行

● 我们只需要在转账或贷款更新UI后执行上面的代码即可

至此，这个应用程序我们将全部完成！！！