JavaScript优化页面请求---防抖

        说到优化是我们在写前端的时候最需要注意的一项。页面跑的速度，页面的稳定性关乎着页面做的好不好。

        我们知道当我们在前端开发过程中有一部分用户行为会频繁的触发事件执行（比如input的input事件），而对于Dom操作的资源加载所耗费性能的处理，很可能会导致页面卡顿，甚至是浏览器崩溃，函数防抖就是为了处理这种事情而来的。

        防抖

        当函数频繁触发情况下，经过一段时间再触发。

        应用场景：实时搜索和拖拽

        我们先以实时搜索代码来体验一下

function show(e) {
        console.log(e.target.value);  // 用实时搜索执行这串代码
    }

var timer = null;  //设置定时器    
    inp.oninput = function (e) {
        var self = this; //保存外层函数this        
        var args = [].slice.call(arguments); // e作为arguments的第一个值 arguments[0]         
        clearTimerout(timer); //初始化定时器        
        timer = setTimeout(function(){            
            show.apply(self,args); //改变函数执行的this指向.        
        },1000);        
        if(e.target.value == ""){ 
            clearTimeout(timer); //当输入框为空时候也不会触发input        
        }      
    }

        当然前端在编程过程中为了减少代码的冗余度，避免代码的重复性。上面这样写是不行的，我们可以封装成防抖方法。

        封装防抖方法的实现

 function debounce(fn,time) {
        var timer = null;
        var _self = this;
        var args = [].slice.call(arguments,2); 
        var drag = true;
        return function(e){
            if(drag) {
                args.unshift(e);
                drag = false;
            }
            clearTimeout(timer);
            timer = setTimeout(function(){
                fn.apply(_self,args);
            }, time);
            if(e.target.value ==''){
                clearTimeout(timer);
            }
        }
    }
inp.oninput = debounce(show,1000);

        这样就可以了。对于页面优化是我们编程很重要的一部分。

        --主页传送门--