防抖和节流

开发的时候，经常绑定一些事件，如resize，mousemove，有些时候我们不希望事件持续触发，防抖和节流就可以解决这个问题。减少调用事件的频率，达到较好的用户体验

防抖

指事件触发n秒内只能执行一次，如果在n秒内又触发了函数，则重新计算时间。防抖分为立即执行和非立即执行

相当于就是多次执行，只执行一次，非立即执行

        var div=document.querySelector('div');
        var n=0;
        function fn(){
            n++;
            div.innerHTML=n;
        }


          //非立即执行函数
        function debounce(fun,time){
            var timer;
            return function(){
                if(timer){
                    clearTimeout(timer);
                }
                timer=setTimeout(fun,time)
            }
        }


  document.documentElement.onmousemove=debounce(fn,1000);

节流

指连续触发事件但是在n秒中只执行一次。节流会稀释函数的执行频率。可以通过时间戳，定时器两种方式实现。

1.时间戳

  var div=document.querySelector('div');
        var n=0;
        function fn(){
            n++;
            div.innerHTML=n;
        }
        // 时间戳  创建节流
        function throttle(fun,time){
            var previous=0;
            return function(){
                var now=Date.now();
                if(now-previous>time){
                    fn();
                    previous=now;
                }
            }
        }

        
        
        document.documentElement.onmousemove=throttle(fn,1000);

2.定时器

  var div=document.querySelector('div');
        var n=0;
        function fn(){
            n++;
            div.innerHTML=n;
        }
      

        
        // 定时器  创建节流
        function throttle(fun,time){
            var timer;
            return function(){
                if(!timer){
                    timer=setTimeout(function(){
                        timer=null;
                        fn();
                    },time)
                }
            }
        }
        document.documentElement.onmousemove=throttle(fn,1000);

运用场景：滚动事件，表单提交事件