前端场景4__防抖节流实际应用

防抖： 在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。

节流： 规定在delay时间内，只能有一次触发事件的回调函数执行，如果在delay时间内某事件被触发多次，只有第一次能生效。

其实两者采用的都是闭包原理，防抖保存的是是否注册了定时器，节流保存的是注册时间

基本实现:

// 防抖
function debounce(fn, delay) {
   
	var timer = null;
	return function() {
   
		var context = this
		var args = arguments
		// 如果此时存在定时器的话，则取消之前的定时器重新记时
		if (timer) {
   
			clearTimeout(timer)
			timer = null
		}
		// 设置定时器
		timer = setTimeout(() => {
   
			fn.apply(context, args)
		}, delay)
	}
}

// 节流
function throttle(fn, delay) {
   
	var preTime = Date.now();
	return function() {
   
		var context = this
		var args = arguments
		var nowTime = Date.now()
		// 如果两次时间间隔超过了指定时间，则执行函数
		if (nowTime - preTime >= delay) {
   
			preTime = Date.now();
			return fn.apply(context, args);
		}
	}
}

具体场景：

防抖场景： 搜索框

节流场景：滚动