函数防抖和函数节流

• 函数防抖

  • 什么是防抖？

    在事件触发n秒后，再执行回调，如果这n秒后又触发了，则重新计时

  • 怎么防抖？

     function _debounce(fn,wait){
            var timer = null;
            return function(timer){
                clearTimeout(timer);
                timer = setTimeout(function(){
                    fn();
                },wait)
            }
        }
     function _log() {
            console.log(1);
        }
    //使用
    //_debounce(_log,500);
    

• 函数节流

  • 什么是节流？

    预先设定一个周期，当调用动作的时刻减去上一次执行事件大于预定周期时，则执行该动作，否则进入下一个周期

  • 怎么节流？

    function _throttle(fn,wait,time){
            var previus = null;
            var timer = null;
            return function(){
                var now = new Date();
                if(!previus){
                    previus = now;
                }
                if(now - previus > time){
                    clearTimeout(timer);
                    fn();
                    previus = now;
                } else {
                    clearTimeout(timer);
                    timer = setTimeout(function(){
                        fn();
                    },wait);
                }
            }
        }
        function _log() {
            console.log(1);
        }
    //使用
    //_throttle(_log,500,2000);
    

• 为什么要防抖和节流？

  限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象

• 什么时候防抖和节流？

  window对象的resize、scroll事件、拖拽时的mousemove事件、文字输入或自动完成的keyup事件