1.函数防抖（debounce）
函数防抖，debounce。其概念其实是从机械开关和继电器的“去弹跳”（debounce）衍生出来的，基本思路就是把多个信号合并为一个信号。
函数防抖就是让某个函数在上一次执行后, 满足等待某个时间内不再触发此函数后再执行, 而在这个等待时间内再次触发此函数, 等待时间会重新计算。
处理诸如
resize、scroll、mousemove和keydown/keyup/keypress等DOM事件的时候，通常我们不希望这些事件太过频繁地触发，比如input输入框架的格式验证，你可以隔200ms验证一次，而不是输入change之后立即验证。
/**
* 函数防抖
* @param {*} fn 需要防抖的函数
* @param {*} delay 延迟执行的时间
*/
function debounce(fn, delay) {
let timeout;
return function() {
// 保存this和参数
let context = this
let args = arguments
if(timeout) {
clearTimeout(timeout) //频繁触发则清除上一次，只执行最后一次
}
timeout = setTimeout(() => {
fn.apply(context, args)
},delay)
}
}
// 测试
function fn(num){
console.log(num)
}
debounce(fn, 1000)(2) // 输出2
2.函数节流（throttle）
函数节流有点类似函数防抖，区别就是：对于连续触发的事件，函数防抖只执行最后一次触发的事件，函数节流则是降低事件发生的频率，让事件以较低的频率执行。可参考http://demo.nimius.net/debounce_throttle/
函数节流会用在比input, keyup更频繁触发的事件中，如resize, touchmove, mousemove, scroll。
throttle会强制函数以固定的速率执行。因此这个方法比较适合应用于动画相关的场景。
/**
* 函数节流
* @param {*} fn 要节流的函数
* @param {*} threshhold 执行间隔
*/
function throttle(fn, threshhold) {
let timeout = null
let start = new Date()
return function() {
// 保存this和参数
let context = this
let args = arguments
clearTimeout(timeout)
let curruent = new Date()
if(curruent - start >= threshhold) {
fn.apply(context, args)
start = curruent
} else {
timeout = setTimeout(() => {
fn.apply(context, args)
}, threshhold)
}
}
}
//测试，结果为每 5s 输出一个3，而不是 0.5s
let test = throttle((num) => {
console.log(num)
}, 5000)
setInterval(() => {
test(3)
}, 500)
