js防抖节流

防抖（debounce）

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

防抖函数分为非立即执行版和立即执行版。

非立即执行版：

第一种

function debounce (fn, delay) {
            let timer = null
            return function (...args) {
                timer && clearTimeout(timer)
                timer = setTimeout(() => {
                    fn.apply(this, args)
                }, delay)
            }
        }

第二种

function debounce(fn,delay){
            var timer = null
            return function(){
                var ctx = this;
                var args = arguments;
               timer && clearTimeout(timer)
               timer = setTimeout(function(){
                   fn.apply(ctx,args)
               },delay)
            }
        }

立即执行

立即执行就是事件触发后立即执行，然后超过一段时间没有触发事件，执行函数才会被触发执行；

function(fn,delay){
  var timer = null;
  return function(){
     var ctx = this;
     var args = arguments;
     timer && clearTimeout(timer);
     var immediate = !timer
     if(immediate){
        fn.apply(ctx,args)
     }
    timer = setTimeout(function(){
      timer = null;
    },delay)
  }
}

两种合并

 /**
         * fn 执行函数
         * delay 延迟时间
         * immediate 是否立即执行 true：立即执行，false:非立即执行
         * */
        function debounce(fn,delay,immediate){
            var timer =null;
            return function(){
                var ctx = this,
                    args = arguments;
                timer&&clearTimeout(timer)
                if(immediate){
                    var immediate = !timer;
                    immediate && fn.apply(ctx,args)；
                    timer = setTimeout(()=>{
                        timer=null
                    },delay)
                }else{
                    timer=setTimeout(()=>{
                        fn.apply(ctx,args);
                    },delay)
                }
            }
        }

节流

所谓节流就是在连续触发事件过程中，程序会稀释执行的次数，程序会在规定时间内ns内只执行一次

节流 一般有两种方式：时间戳和定时器

第一种时间戳

function throttle(fn,delay){
            var previous = new Date().getTime();
            return function(){
                var ctx = this,
                    args = arguments,
                    now = new Date().getTime();
                if(now-previous>delay){
                    fn.apply(ctx,args);
                    previous = new Date().getTime();
                }
            }
        }

第二种定时器

function throttle(fn,delay){
            var timer = null;
            return function(){
                var ctx = this,
                    args = arguments;
                if(!timer){
                     timer= setTimeout(function(){
                        fn.apply(ctx,args);
                        timer=null;
                    },delay)
                }
            }
        }