函数的节流与防抖（比较+示例）JavaScript

函数的节流与防抖是在前端面试时经常会被问到的一个点，关于这两个概念说起来可能比较难以区别，所以写了一个小例子帮助理解。
概念
节流：给连续触发执行的函数设置事件间隔，超过这个时间间隔函数才会执行一次。
防抖：函数连续触发时合并执行，超过时间间隔函数才有效。
示例：
给button一个点击事件：

 <button onclick="myFunc()">点击</button>

节流函数

 function throttle(fn,delay){
        var lastTime = 0;
        return function(){
            var nowTime = Date.now();
            if((nowTime - lastTime)>delay){
                fn.call(this);
                lastTime = nowTime;
            }
        }
    }

 var myFunc = throttle(function () {
        console.log("点击事件被触发" + Date.now())
    }, 3000)

为了效果明显将间隔设为三秒，函数被点击一次触发执行后，三秒内再点击函数不会被触发，点击无效。

防抖函数

 function debounce(fn, delay) {
        var timer = null;
        return function () {
            clearTimeout(timer);
            timer = setTimeout(function () {
                fn.apply(this)
            }, delay)
        }
    }

var myFunc = debounce(function () {
        console.log("点击事件被触发" + Date.now())
    }, 3000)

防抖函数三秒执行一次，在这个时间间隔无论点击触发多少次，最终都只会在三秒后执行一次，也就是在此期间触发的函数被合并执行一次。