js定时器【自用留档】

计时器的名字太长了

1.setTimeout

个人常用的是【setTimeout】，属于一次性定时器，执行完毕自动销毁。

ElMessage({
    message: '新增成功，页面即将跳转',
    type: 'success',
  })

  setTimeout(()=>{
    router.push('/index')
  },3000)

2.setInterval

在轮巡支付或者人脸识别之类，查询异步状态时，常用【setInterval】。用完需要手动销毁

// 自动查询支付情况
const checkPayState = () => {
  let i = 0;
  let intervalId = setInterval(() => {
    if (i < 10) {
      i += 1;
      // 查询状态的接口-执行业务
      console.log(i);
    } else {
      clearInterval(intervalId);
    }
  }, 1000);
};

计时器的第一个参数为函数，可以直接提出来

菜鸟教程里还提到可以使用 setInterval() 和 clearInterval()来创建动态进度条：

function move() {
  var elem = document.getElementById("myBar"); 
  var width = 0;
  var id = setInterval(frame, 10);
  function frame() {
    if (width == 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
    }
  }
}