定时器与函数封装

定时器与函数封装

1.定时器的分类

（1）setTimeout延迟执行：延迟某个特定的时间开始执行，只执行一次。

​ 语法：setTimeout（函数，间隔时间（ms））

​ 场景：一般用于广告

（2）setInterval间歇执行（或重复执行）：隔某个时间就执行一次，执行无数次。

​ 语法：setInterval（函数，间隔时间（ms））

​ 场景：一般用于轮播图和倒计时。

2.定时器的简单使用

setTimeout：延迟执行一次
setTimeout(function(){
   },3000);  隔3秒函数一次
//广告 图片显示5s，自动消失
var oImg = document.getElementsByTagName("img")[0];
setTimeout(function () {
   
    oImg.style.display = "none";
},5000);   

setInterval:间歇执行
setInterval(function(){
   },3000);  每隔3秒执行一次函数
var oImg = document.getElementsByTagName("img")[0];
var arr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];
var n = 0;
setInterval(function () {
   
    n++;
    if(n == 4)n=0;
    oImg.src = arr[n];//0 1 2 3
},1000);

3.定时器的清除

定时器一旦开启，就不会自动停止，停止定时器我们需要使用clear，不同的定时器有不同的清除方式。

语法：clearInterval（intervalId）;

​ clearTimeout（intervalId）;（基本上用不上）

注意：停止的是定时器下一次的执行

intervalId：它是一个number数值，开启定时器的时候，会返回唯一一个能标识当前定时器的id，一般是从1开始 1 2 3 4。

var n = 10;
var timer = setInterval(function () {
   //定义一个变量，接受定时器的id
    n--;
    if(n <= 0){
   
        n = 0;
        //停止定时器
        clearInterval(timer);
    }
    document.body.innerHTML = n;
},1000);

定时器的应用

 //setTimeout的应用----讨厌的广告，点击一次按钮关闭一次广告
<style>
        .box{
   
            position:relative;
            width:400px;
            
        }
        button{
   
            position:absolute;
            right:0;
        }
    
    </style>
     <div class="box" style="display:none;">
        <button>X</button>
        <img src="img/tan.png" alt="#" >
    </div>
    <script>
        var oBox=document.getElementsByTagName("div")[0];
        var oBtn=document.getElementsByTagName("button")[0];
        var oImg=document.getElementsByTagName("img")[0];
        var xianshi=function(){
   
            oBox.style.display="block";    
        };
       //广告2秒出现一次
        setTimeout(xianshi,2000);
       //点击按钮关闭广告，隔两秒广告再出来
        oBtn.onclick=function(){
   
            oBox.style.display="none";
            setTimeout(xianshi,2000);
        }    
    </script>

//setInterval的应用----倒计时
<style>
        .box{
   
            width:300px;
            height:300px;
            margin:100px auto;
            font:bold 40px/300px "微软雅黑";
        }
    
    </style>
    <div class="box">
        <span>10</span>
    </div>
    <script>
        var oDiv=document.getElementsByTagName("div")[0];
        var oSpan=document.getElementsByTagName("span")[0];
        //点击倒计时开始
        oDiv.onclick = function(){
   
           var n=11;
           var timeOver= setInterval(function change(){
   
            n--;
            //当n=0时，关闭定时器
            if(n==0){
   
               clearInterval(timeOver);
            }
            oSpan.innerHTML=n;
        },1000);
        }
        
    </scri