前端开发 节流和防抖

1、防抖

定义：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。
常见案例：用户搜索框连续输入时，当用户停止输入后获取查询结果。

	// 防抖
	function debounce(fn, delay=500) {
		let timer = null;
		return function(...args){
			if (timer){
				clearTimeout(timer)
			}
			timer = setTimeout(() => {
				fn.apply(this, args);
            	timer = null;
			}, delay)
		}
	}

2、节流

定义：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。
常见案例：轮播图左右滑动按钮，500ms内频繁点击，只允许触发一次滑动事件，避免图片滑动过快。

	// 节流
	function throttle(fn, delay=500) {
    	let endTime= 0;
	    return function(...args) {
	        var nowTime = new Date(),
	        	_self = this
	        if (nowTime - endTime > delay) {
	            fn.apply(_self, args);
	            endTime = nowTime
	        }
	    }
    }