js-定时器

知识

要用定时器，先清除定时器

 

1、 定时器

  setInterval() 循环定时器；周而复始的执行（循环执行）

  setTimeout()( 执行事件，间隔时间（单位毫秒）)

<script>
    var num=0;
    setInterval(function(){
       console.log( num);
        num++;
    },1000)
</script>

2、setTimeout() 炸弹定时器；用完以后立刻报废（只执行一次）

 

 3、清除定时器

    clearInterval()（清除循环定时器）

       clearTimeout()（清除炸弹定时器）

  var num=0;
    //返回值是setInterval定时器的名字
    var timer=setInterval(function(){
        console.log(num);
        num++;
        if(num===10){
            //清除定时器
            clearInterval(timer)
        }
    },2000)

定时器的定义方法

1、定义方式 （匿名函数）

 setInterval(function(){
        console.log(1)
    },1000);

2、定义方法 （调用函数）

setInterval(fn,1000);
    function fn(){
        console.log(2)
    }

3、定义方法 （最不常用）

  //定义方法3 （最不常用）
  //调用函数里面带有参数，必须加 “”，加引号它会到低层去找函数
  // 如果不带“”就是执行函数，只执行一次
    setInterval("11",1000);
    function fn(a) {

 

案例

 

关闭广告栏

   window.onload=function () {
            var imgArr=document.getElementsByTagName("img");
                setTimeout(fn,5000);
            function fn(){
                imgArr[0].style.display="none";
                imgArr[1].style.display="none";
            }
        }

模拟京东关闭广告栏

window.onload=function () {
        var tipBan=document.getElementsByClassName("top-banner")[0];
        var a=tipBan.children[0].firstElementChild || tipBan.children[0].firstChild;
          //定义定时器都是在外面 是一个数字类型nume
         var time=null;
            
          a.onclick=function () {
              var time=setInterval(function(){
                tipBan.style.opacity-=0.1;
                    //当透明度为0的时候，父盒子完全隐藏，然后清除定时器
                   if(tipBan.style.opacity<0){
                        tipBan.style.display="none";
                       clearInterval(time)
                   }
                },500);
            }
        }