JS 去抖（debounce）与节流（throttle）

debounce

1. 定义：函数去抖的含义就是在一定时间段内只有一个同类的事件触发并执行；如果该时间段有同类的事件触发，则重新开始响应该事件；
2. 实例：输入合法性检测、浏览器resize时自身的处理、scroll事件等
3. 代码：

let timer;
function debounce (fn) {
	clearTimeout(timer);
	timer = setTimeout(() => {
		fn();
	}, 200)
}

// 返回函数版本
function debounce(fn, wait) {
    let tid;

    return function (...args) {
        if (tid) clearTimeout(tid);
        tid = setTimeout(() => {
            fn.apply(this, args);
        }, wait)
    }
}

4. 示例：
   
   

demo点击此处

throttle

1. 定义：函数节流的含义就是在一定的时间段内相应的事件只能被触发一次；如果某段有已经有相应的事件在执行，则在该时间段内不再触发，直到本次事件执行结束；
2. 实例： 请求接口的一些提交按钮；翻页器等
3. 代码：

let timer;
function throttle (fn) {
	if (timer) {
		return;
	}
	timer = setTimeout(() => {
		fn();
	}, 200);
}

// 返回函数版本
function throttle(fn, wait) {
    let tid;
    return function (...args) {
        if (tid) {
            return;
        }
        tid = setTimeout(() => {
            fn.apply(this, args);
        }, wait);
    }
}

#区别
函数去抖和函数节流都是密集型操作中避免事件频繁出发造成性能损耗的解决方案；函数节流，顾名思义就是节约流量，所以每个时间段内只会执行一次，并在此时间段内屏蔽触发的同类事件；而函数去抖则是在用户连续操作中避免事件处理的处理效率不及时间触发速度，从而导致画面卡顿，操作不畅等不良用户体验，所以在很短的时间段内只响应最近触发的事件；

---