认识防抖debounce函数
我们都遇到过这样的场景,在某个搜索框中输入自己想要搜索的内容:
比如想要搜索一个MacBook:
当我输入m时,为了更好的用户体验,通常会出现对应的联想内容,这些联想内容通常是保存在服务器的,所以需要一次网 络请求;
当继续输入ma时,再次发送网络请求;
那么macbook一共需要发送7次网络请求;
这大大损耗我们整个系统的性能,无论是前端的事件处理,还是对于服务器的压力;
但是我们需要这么多次的网络请求吗?
不需要,正确的做法应该是在合适的情况下再发送网络请求;
比如如果用户快速的输入一个macbook,那么只是发送一次网络请求;
比如如果用户是输入一个m想了一会儿,这个时候m确实应该发送一次网络请求;
也就是我们应该监听用户在某个时间,比如500ms内,没有再次触发时间时,再发送网络请求;
这就是防抖的操作:只有在某个时间内,没有再次触发某个函数时,才真正的调用这个函数;
// 防抖
function debounce(fn, delay) {
// 1.用于记录上一次事件触发的timer
let timer = null
// 2.触发事件时执行的函数
return function (...args) {
// 2.1 如果有再次触发事件 取消上一次事件
if (timer) clearTimeout(timer)
// 2.2 延迟去执行对应的fn函数
timer = setTimeout(() => {
fn.apply(this, args)
timer = null // 执行函数之后 将timer重新置为null
}, delay)
}
}
认识节流throttle函数
很多人都玩过类似于飞机大战的游戏
在飞机大战的游戏中,我们按下空格会发射一个子弹:
很多飞机大战的游戏中有这样的设定,即使按下的频率非常快,子弹也会保持一定的频率来发射;
比如1秒钟只能发射一次,即使用户在这1秒钟按下了10次,子弹会保持发射一颗的频率来发射;
但是事件是触发了10次的,响应的函数只触发了一次;
![](https://i-blog.csdnimg.cn/blog_migrate/716ea1a83f5a62f103ec1c67663da3c5.png)
// 节流
function throttle(fn, interval) {
let startTime = 0
return function (...args) {
// 1.获取当前时间
const nowTime = new Date().getTime()
// 2.计算需要等待的时间执行函数
const waitTime = interval - (nowTime - startTime)
if (waitTime <= 0) {
fn.apply(this, args)
startTime = nowTime
}
}
}
我们通过一个搜索框来验证防抖、节流函数的实现过程:
监听input的输入,通过打印模拟网络请求
<input type="text">
const inputEl = document.querySelector('input')
let count = 1
inputEl.addEventListener('input', apdebounce(function (event) {
console.log(`发送网络请求${count++}次:`, this.value, event)
}, 300))