debounce

函数防抖：

1	当调用动作经过执行时间间隔后，才会执行该动作，若在这时间间隔内又调用此动作则将重新计算执行时间间隔

下述为一个防抖的例子

function debounce(fn, time) {
    let timer;
    return function(...args) {
        clearTimeout(timer);
        let context = this;
        timer = setTimeout(function() {
            fn.apply(context, args);
        }, time)
    }
}

function fn(event) {
    console.log(event);
}

window.onscroll = debounce(fn, 300);

思路：在闭包中使用变量存储定时器的id，如果在预设时间间隔内再次触发，则清除定时器后，重建一个新的定时器，这里就相当于重置执行时间间隔。

比喻：有人进入电梯（触发函数），电梯等10s后才启动（执行时间间隔），当第二个在10s内进入了电梯，那么需要再等10s后电梯才启动（重置执行时间间隔）

throttle

函数节流：

1	当调用动作经过执行时间间隔后，执行该动作，若在这时间间隔内又调用此动作不重新计算执行时间间隔

下述为节流的一个例子

function throttle(fn, time){
	let isExecute = true;
	return function(...args){
		if(!isExecute) return;
		let context = this;
		isExecute = false;
		setTimeout(()=>{
			fn.apply(context, args);
			isExcute = true;
		},time)
	}
}

function fn(event) {
    console.log(event);
}

window.onresize = throttle(fn, 300);

思路：在闭包中使用变量存储是否执行函数的标识，初始化函数时标识为true，当触发函数时，标识为false时return,为true时将标识赋值为false,防止后面触发函数时进入执行逻辑，直到第一次触发经过了执行时间间隔后再讲标识赋值为true，相当于进入下一周期。

比喻：有人进入电梯（触发函数），电梯等10s后才启动（执行时间间隔），无论这10s内有多少人进入，时间到了电梯准时启动。

common

限制函数调用频率

常用于

onscroll（全屏滚动等）
onresize（自适应窗口大小）
mouseover （拖拽）
keyup （文字自动补全）等

difference

在规定的时间间隔内，debounce：每触发一次函数重新计算执行时间间隔，throttle：不会重新计算执行时间间隔。