前端定时器案例-倒计时跳转页面

两种定时器

• 延时定时器：setTimeout，只会在时间结束之后执行1次

  // 参数1：回调函数     参数2:  时间(毫秒)
  var timer = setTimeout(function(){},1000)
  // 清除定时器
  clearTimeout(timer);
  

• 间歇定时器/循环定时器：setInterval，每次时间间隔执行1次

  // 参数1：回调函数   参数2： 时间（毫秒）
  var timer = setInterval(function(){},1000)
  // 清除定时器
  clearInterval(timer);
  

• 清除定时器clearTimeout和clearInterval

  • 清除定时器的方法可以通用
  • 在重新设置定时器之前，一定要先清除定时器，不然定时器会累加
  • 如果要清除定时器，一定要给设置的定时器接收一个返回值
  • 定时器也不一定准确，如果有大量耗时的同步代码，会阻塞定时器代码执行
  • 如果需要定时器的内容先执行一次，可以把函数提取出来先调用一次

前端定时器案例-倒计时跳转页面

<h1>
  404,访问失败，页面将在<span id = 'txt'>5</span>秒后跳转至首页
</h1>
<script>
  var txt = document.getElementById('txt');
  var num = 5;
  var timer = setInterval(function(){
    num--;
    txt.textContent = num;
    if(num<=0){
      clearInterval(timer)
      // 类似于a标签点击跳转的效果
      location.href = 'http://www.baidu.com'
    }
  },1000)
</script>