防抖与节流小案例

　　在上一篇文章中提到了防抖与节流函数在js中的实际应用，这个直接和用户体验以及浏览器加载，服务器负载相关，所以防抖与节流对于前端开发人员来说是必须要掌握的一种技术。下面就根据一个小案例来具体体现防抖与节流的作用。

　　首先，没有进行防抖与节流处理的鼠标移动事件：

var num = 1;
        var oWrap = document.getElementById('wrap');
        function count (){
            oWrap.innerHTML = num++;
        }
        oWrap.onmousemove = count;

　　上面代码中，给div绑定了鼠标移动事件，当鼠标在盒子内频繁移动时，事件处理函数也在持续的被调用，这样会对浏览器造成不必要的负载。

防抖函数（debounce）

　　防抖函数（debounce）：指事件在触发后指定时间内只执行一次，若在指定时间内又触发了事件，则重新计算函数执行时间，防抖函数分为立即执行版和非立即执行版

非立即执行版：

function debounce(fn,wait){
            var timeout;
            return function(){
                var context = this;
                var args = arguments;
                if(timeout){
                    clearTimeout(timeout);
                }
                timeout = setTimeout(()=>{
                    fn.apply(context,args)
                },wait);
            }
        }
        oWrap.onmousemove = debounce(count,1000);

 

　　

　　上述非立即执行防抖函数结果显示为鼠标在盒子内频繁移动（此处gif看不出效果，不过真实在移动）时，函数不会立即执行，在1000ms过后会执行一次事件函数，当我在触发事件后在1s内再次触发事件会重新计算执行时间并在结束事件后执行函数

 立即执行版：

 function debounce(fn,wait){
            var timeout;
            return function(){
                var context = this;
                var args = arguments;
                if(timeout){
                    clearTimeout(timeout);
                }
                var callNow = !timeout;
                timeout = setTimeout(()=>{
                    timeout = null;
                },wait)
                if(callNow){
                    fn.apply(context,args);
                }
            }
        }
        oWrap.onmousemove = debounce(count,1000);

　　

　　立即执行版防抖函数是在触发事件后立即执行，并在1000ms后事件再次触发时调用执行函数，若在延迟时间内再次触发会重新计算执行时间

结合版：

 function debounce(fn,wait,immediate){
            var timeout;
            return function (){
                var context = this;
                var args = arguments;
                if(timeout){
                    clearTimeout(timeout);
                }
                if(immediate){
                    // immediate判断函数为立即执行还是非立即执行（true为立即执行，false为非立即执行）
                    var callNow = !timeout;
                    timeout = setTimeout(()=>{
                        timeout = null;
                    },wait)
                    if(callNow){
                        fn.apply(context,args);
                    }
                    else{
                        timeout = setTimeout(function(){
                            fn.apply(context,args);
                        },wait);
                    }
                }
            }
        }
        oWrap.onmousemove = debounce(count,1000,1)

　　二者结合版是在事件触发后会立即执行一次函数并在1000ms后再次执行一次函数（注：存在bug，哈哈！！！当触发事件后在延迟时间内再次触发或者频繁触发事件依旧会执行多次函数）

 

节流函数（throttle）

　　节流函数（throttle）：指事件在频繁触发后在指定时间内触发一次，节流会稀释函数的执行频率，对于节流，存在时间戳和定时器两种方式

时间戳版：

function throttle(func, wait) {
            var previous = 0;
            return function () {
                var now = Date.now();
                var context = this;
                var args = arguments;
                if (now - previous > wait) {
                    func.apply(context, args)
                    previous = now;
                }
            }
        }
        oWrap.onmousemove = throttle(count,1000)

　　可以看出，鼠标在盒子内频繁移动时，函数会立即执行，且每1s执行一次

定时器版：

 function throttle(fn,wait){
            var timeout;
            return function(){
                var context = this;
                var args = arguments;
                if(!timeout){
                    timeout = setTimeout(()=>{
                        timeout = null;
                        fn.apply(context,args)
                    },wait)
                }
            }
        }
        oWrap.onmousemove = throttle(count,1000)

　　定时器版节流函数在事件触发后不会立即执行，会在1s后执行一次，当持续触发时会每隔1s执行一次，在停止触发事件后，函数会再执行一次

结合版：

function throttle(fn, wait, type) {
　　　　　　　　　　// type判断节流函数方式，1为时间戳版，2为定时器版
            if (type === 1) {
                var previous = 0;
            } else if (type === 2) {
                var timeout;
            }
            return function () {
                var context = this;
                var args = arguments;
                if (type === 1) {
                    var now = Date.now();

                    if (now - previous > wait) {
                        fn.apply(context, args);
                        previous = now;
                    }
                } else if (type === 2) {
                    if (!timeout) {
                        timeout = setTimeout(() => {
                            timeout = null;
                            fn.apply(context, args)
                        }, wait)
                    }
                }
            }
        }
        oWrap.onmousemove = throttle(count,1000,2)

 

参考文章：

　　https://github.com/mqyqingfeng/Blog/issues/22

　　https://github.com/mqyqingfeng/Blog/issues/26