聊聊函数防抖和函数节流两兄弟

前言

最近的项目里遇到了一些意外的情况，我要实现的功能是鼠标滑轮滑动，页面会根据滑轮上下跳转，但是由于不好控制滑轮，有的时候会连续跳转好几个页面，这就会严重影响到用户体验了。当时用了定时器来解决这个问题，后来经过了解才知道原来有函数防抖和函数节流这两个概念。接下来就通过实例来帮助大家认识下这两位兄弟吧。

一、函数防抖

概念：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行

有了这个指定时间间隔，要实现这个函数防抖我们自然而然的想到定时器，接下来让我们用着试下

function debounce(fn,delay) {
    //记录上一次的延时器
    var timer = null;
    return function () {
        //清除上一次延时器
        clearTimeout(timer);
        //重新设置新的延时器
        timer = setTimeout( function ( ) {
            fn.apply(this);
        },delay);
    }
}

其实代码十分的简单，主要围绕生成定时器和清除定时器的时机。每次触发某件事，我们都可以传入函数fn以及延迟时间delay.如果第二次触发事件的时间在delay之间，那么事件还没触发，就会被函数内部的清除定时器清除，再重新开启了一个定时器，重新定时，直到你不再触发事件或者触发间隔大于delay，于是这样你只能触发一次，在一些不好控制的事件触发下会有很大帮助。

二、函数节流

　　概念：有个需要频繁触发函数，出于优化性能角度，在规定时间内，只让函数触发的第一次生效，后面不生效

这里同样有个规定时间的概念，也是实现的核心，我们需要求出一个间隔时间，我们可以利用Date.now()不断的记录当前时间和更新上一次的时间，二者相减再与规定时间比较，再考虑是否调用函数

function throttle(fn,delay) {
    //记录上一次函数触发的时间
    var lastTime = 0;
    return function(){
        //记录当前函数触发的时间
        var nowTime = Date.now();
        if (nowTime - lastTime > delay) {
            fn();
            //同步时间
            lastTime = nowTime;
        }    
    }
}

　　节流函数在哪里最经常见到呢？我想应该是滚动事件，例如判断滚动条是否已经到底部了？这些场景不需要无时无刻的去获取数据，这样是比较消耗性能的，我们完全可以隔一小段时间判断一次。这就可以很好的利用到函数节流。

三、总结

函数防抖和函数节流的实现并不难，实现的方法也不仅限以上。但是它却可以很好的节省计算机的资源以及增加用户的体验。至于使用的场景那真是五花八门，希望大家能好好的利用起来吧