函数防抖与节流

函数防抖与节流，网上的内容参差不齐，很容易弄混淆，本文不针对定义来说明什么是防抖，什么是节流，直接 show me your code。值得一提的是高程3也把防抖与节流弄混淆了。

函数防抖: 任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行

作用：使连续的函数执行降低到一次

机理：清除定时器:

function debounce(fn,delay){
    var context,args;
    var timerId = null
    return function(){
        context = this
        args = arguments
        if(!timerId){
            timerId =setTimeout(function(){
                timerId = null
                fn.apply(context,args)
            },delay)
        }
    }
}

函数节流: 指定时间间隔内只会执行一次任务
机理：用一个变量来标记

function throttle(fn,delay){
    var context,args;
    var flag = true
    return function(){
        context = this
        args = arguments
        if(!flag){return;}//如果为true继续执行，否则return；然后将flag设置为false
        flag = false;//先执行，当 setTimeout 还未执行的时候，flag 这个标记始终为 false，在开头的判断中被 return 掉
        setTimeout(function() {
            flag = true;//后执行，，表示可以执行下一次的循环了，因此flag = false会在delay时间后被覆盖，此时flag为true就继续执行
            fn.apply(this, arguments);
        }, delay);
    }
}

其实函数节流与函数防抖的原理非常简单，巧妙地使用 setTimeout 来存放待执行的函数，这样可以很方便的利用 clearTimeout 在合适的时机来清除待执行的函数。

使用函数节流与函数防抖的目的，就是为了节约计算机资源，提高性能

参考链接：
http://justclear.gitlab.io/throttle-and-debounce/