定时器

计时器

• setInterval：重复定时器，隔某个时间就进行一次
• setTimeout：延迟定时器，延迟特定时间之后执行，且执行一次
• 语法
  • setInterval（函数，间隔时间）
  • setTimeout（函数，间隔时间）
  • 间隔时间单位是毫秒，1秒等于1000毫秒
• 定时器是异步的，解析的时候，因为他有时间上的延迟，所以最后才解析他，不管他的延迟时间是多长时间

简单使用：

<img src="../../day03/代码/image/仙女7.jpg" alt="">
...
<script>
	var img = document.querySelector('img');
        setInterval(
            function () {
                img.style.display = 'block';
            }
            , 3000)
        var a = 0;
        img.onclick = function () {
            img.style.display = 'none';
        }
</script>
//实现了，图片默认消失，

清除计时器

• 不同计时器，清除方法也不相同

• clearInterval(intervalId); 清除重复定时器

• clearTimeout(intervalId); 清除延迟定时器

• //定义一个数值
  btn.οnclick=function(){
  	var s=10;
  	var timer=setInterval(function(){
  		s--;
  		console.log(s);
  		if(s==0){
  			clearInterval(timer);//关闭定时器
  		}
  	},300)
  }
  

定时器常遇到的问题

• for(var i=0;i<5;i++){
  	setTimeout(function(){
      	console.log(i); //五个5
      },0)                      
  }
  	console.log(i);//5        
  

• **原因：**因为定时器是异步的，先去执行别的，最后一个才会执行的定时器，所以解析时，for循环是自动就解析的，所以循环以后，i=5时就不满足循环了，所以最后一个console.log结果为5；此时i已经为5了，再进去执行，就一直是5了，所以会显示五个5.

按钮禁用是disable