防抖、节流

防抖、节流的作用

防抖：为了提高项目的性能，在事件触发后，如果在短时间内触发了多次,则清除超时调用，规定时间代码只执行一次，提高性能

节流：为了提高项目的性能，当事件触发后，约定单位时间之内，事件代码执行一次，所以，节流减少了单位时间内代码的执行次数，从而提高性能

1）.先在body中写一个div盒子当做触发鼠标移动事件的载体

  <div class="box">0</div>

2）.获取标签

        var box_element = document.querySelector(".box");

     

3）.定义一个自增的计数方法，每次触发计数+1    

      var num = 0;

         var add = function(){

            num ++;

            box_element.innerHTML = num;

        }     

 

4）.绑定鼠标移动的事件(无防抖)
    

    x_element.onmousemove = function(){

            add();

        }  

仅仅只是把鼠标从上往下移动了一小段距离，就触发了91次add自增函数。

    防抖：间隔时间内，事件密集（多次）触发，会重新计算间隔的时间，在间隔时间后执行函         数(add)。使用延迟函数可以体现防抖思想。密集触发事件，只执行最后一次触发的事件

(使用防抖思想)

var delay = null;

//当鼠标在box上移动时，触发鼠标移动事件

        box_element.onmousemove = function(event){

            if(delay != null) {

//当delay不为null时，清除延迟函数

                clearTimeout(delay)

            };

//给delay赋值，让其不等于null

//setTimeout是延迟函数，触发300ms后再执行其中的方法

        delay = setTimeout(function(){

                add();

                delay = null;

            },300)

        }

原理：

        当两次鼠标移动的间隔不超过300ms时，第二次触发的鼠标移动事件中  if(delay != null)为true，就会清除掉第一次触发的鼠标移动事件中setTimeout延迟函数，从第二次触发的鼠标移动事件中的setTimeout延迟函数开始的时间点重新计时300ms。

        若300ms内又触发了第三次鼠标移动事件，则清除第二次触发的鼠标移动事件中的setTimeout延迟函数，重新开始计时第三次触发的鼠标移动事件中的setTimeout延迟函数，若300ms内没有触发鼠标移动事件，则会执行第二次触发的鼠标移动事件中的setTimeout延迟函数。           

一直在div中不断的移动鼠标，只有停下鼠标移动超过300毫秒时，才会执行一次add（），若鼠标不停移动，则不会执行add（）

节流：间隔时间内，不管怎么触发或者多次触发事件,不会重新计算间隔时间，只有时间到了，就执行指定的函数(add)

var delay = false;

//当鼠标在box上移动时，触发鼠标移动事件

        box_element.onmousemove = function(event){

//当delay为true时阻止函数执行

            if(delay) {

                return

            } else{

                delay = true;

                setTimeout(function(){

                        add();

                        delay = false;

            },300)

        }
   }

原理：

        当第一次触发鼠标移动事件时，if（delay）为false，执行else里的代码，先把delay设置为true，在执行延迟函数，300ms后把delay设置为false。在这300ms里，true一直为true，此时鼠标移动if（delay）为true，执行return，阻止后续代码运行（不触发延迟函数里的自增方法）

 

若鼠标一直在box上移动，则每300ms执行一次自增函数