切换tab栏+节流器

大家好，今天我给大家带来的是鼠标切换tab栏 ，然后再次功能上加上节流器，使其鼠标快速划过时不会处罚切换

下面是css、body代码（可忽略）

css：

  <style>
        *{
            margin: 0px;
            padding:0px;
            list-style-type: none;
            margin: 0px auto;
        }
        .box{
            width: 250px;
        }
        .tablan{
            width: 100%;
            height: 32px;
            border: 1px solid black;
        }
        li{
            float: left;
            width: 48px;
            height: 30px;
            border: 1px solid;
        }
        .plean > div{
            width: 100%;
            height: 200px;
            border: 1px solid black;
            display: none;
        }
        .aa{
            background-color: gainsboro;
        }
        .bb{
            display: block;
        }
       .plean > div:nth-of-type(1){
           background-color: red;
       }
        .plean > div:nth-of-type(2){
           background-color: blue;
       }
        .plean > div:nth-of-type(3){
           background-color: #ff24f9;
       }
        .plean > div:nth-of-type(4){
           background-color: #0dffbe;
       }
        .plean > div:nth-of-type(5){
           background-color: #57ff1f;
       }
    </style>

　　body：

  <div class="box">
        <ul class="tablan">
            <li class="aa">第一栏</li>
            <li>第二栏</li>
            <li>第三栏</li>
            <li>第四栏</li>
            <li>第五栏</li>
        </ul>
        <div class="plean">
            <div class="bb"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

接下来是最重要的js代码：

 <script>
        window.onload = function () {
            var  lis = document.querySelectorAll("li");
            var  divs = document.querySelectorAll('.plean div');
            var  timer = null;
            //this 在普通函数中指向windows
            //this 在事件里得时候指向触发者
            //函数截流
            for (var i = 0 ; i< lis.length;i++){
                lis[i].index =  i ;
                lis[i].addEventListener("mousemove", function () {
                    var that = this;
                    clearTimeout(timer);
                    timer = setTimeout(function () {
                           for (var j=0 ; j<divs.length ;j++){
                               lis[j].className = '';
                               divs[j].style.display = 'none';
                           }
                        that.className ='aa';
                           divs[that.index].style.display = 'block';
                       },200)
                })
                    //防止鼠标快速划出时候执行timer
                    lis[i].addEventListener("mouseleave", function () {
                        clearTimeout(timer);
                    })
            }
        }

    </script>

首先基本操作 window.onload = function={}保证js代码不论写在哪里都可以运行到

紧接着获取li标签也就是tab栏 和div的全部

然后在声明一个timer 做定时器的变量

做一个for循环，给所有li标签添加上一个监听事件 ，即鼠标划入事件

                lis[i].index =  i ;这句话的目的就是给lis[i]元素增加一个属性 叫index 让它的值等于i 也就是说让他有下标

然后声明一个定时器函数，在里面遍历所有lis divs 的值 让li 标签的类名都为空，div都隐藏

下面的话因为 setTimeout也是一个普通函数，所以  lis[i] 不能用this 表示，即在 setTimeout上面声明了一个变量叫that 把 this赋值给它

即 that.className ='aa'; 就是让该lis[i]的类名 = aa;

  divs[that.index]（div[i]）.style.display = 'block'; 就是让与其对应的div显示出来

以上就是切换

接下来讲节流器

 //防止鼠标快速划出时候执行timer
                    lis[i].addEventListener("mouseleave", function () {
                        clearTimeout(timer);
                    })

因为不写这个的时候，在等于规定的事件时它总会执行，就算离开tab栏也会执行

所以，要在外面加一个鼠标移开的事件，让定时器停止，即快速移开就不会出发切换。