面试题防抖与节流

目录

前言

一、防抖是什么？

1.模拟场景

二、实现封装的防抖

二、节流是什么？

1.模拟场景

二、实现封装的节流

总结

---

前言

防抖与节流 面试官最喜欢考的题

引用一句话:

防抖---王者荣耀回城       （当第一触发时候执行,再次触发重新计时）

节流---王者荣耀释放技能（每当过了特定的时间执行）

此图来自:HearLing

---

一、防抖是什么？

给按钮加函数防抖防止表单多次提交。对于输入框连续输入进行ajax验证时，用函数防抖能有效减少请求次数。搜索框实时联想（keyup/input）、按钮点击太快，多次请求（登录、发短信）、等与用户交互的事件。

1.模拟场景

---

可以看到每点一次触发一次，所以我们要优化这种恶意请求 可以用定时器来优化当用户在上一个定时器时间没过完的情况下 并触发事件的时候清除定时器

let t = null
		box.onclick = function () {
			clearTimeout(t)
			//这个地方this指向外层函数
			t = setTimeout(() => {
				console.log(this, '我点击了按钮')
			}, 1000)
		}

 是不是非常像王者荣耀回城 （当第一触发时候执行,再次触发重新计时）

---

二、实现封装的防抖

box.onclick = debounce(function () {
			console.log(this, '我点击了按钮')
		}, 1000, true)

		function debounce(fn, delay) {
			//保存定时器
			let t = null
			return function () {
				// 当用户在上一个定时器时间没过完的情况下 并触发事件的时候清除定时器
				// 让用户当次触发无效 并重新计时
				if (t) {
					//清除定时器
					clearTimeout(t)
				}
				//延迟函数运行时间
				t = setTimeout(() => {
					// 改变this指向,因为这里的fn是直接调用的
					fn.call(this)
				}, delay)
			}
		}

二、节流是什么？

页面滚动（scroll）、DOM 元素的拖拽（mousemove）、抢购点击（click）、播放事件算进度信息，商品搜索列表、商品橱窗等，用户滑动时 定时 / 定滑动的高度发送请求。

1.模拟场景

我们要优化频繁触发请求 可以用定时器来优化 每过一段时间才触发事件

 是不是非常像王者荣耀释放技能（每当过了特定的时间执行）

二、实现封装的节流

window.onscroll = throttle(function () {
			console.log(this, '我正在下拉导航栏触发事件')
		}, 1000)

		function throttle(fn, delay) {
			let flag = true
			return function () {
				if (flag) {
					setTimeout(() => {
						// 改变this指向,因为这里的fn是直接调用的
						fn.call(this)
						// 每过delay秒才能让此函数在触发
						flag = true
					}, delay)
				}
				flag = false
			}
		}

总结

防抖---王者荣耀回城 （当第一触发时候执行,再次触发重新计时）

节流---王者荣耀释放技能（每当过了特定的时间执行）