1.什么是防抖?
我的理解就是一段时间内,只执行最后一次的事件调用,如搜索功能,如果用户在输入框按下一个字母,后台就调用一次接口,那用户频繁的输入,频繁的调接口就会非常消耗性能,用户可能是要输入一连串几个字来查询,而不是输入一个字就查询一次,所以为了避免这种一段时间内非常频繁的调用,就需要使用防抖函数。用来限制一段时间内的频繁调用。
就比如用户输入完两秒之后开始查询,一旦两秒内又有新的输入,则不调用接口查询,等用户再次输入完,两秒之后没有继续输入就调用接口查询。
因此,防抖的流程就是,用户输入,调用防抖函数,防抖函数开启一个两秒定时器,一旦用户在两秒内再次输入,则重置计时器,重新开启一个两秒的定时器,当用户两秒后没有再次输入,则执行查询接口函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<script>
// 获取输入框DOM元素
const oInput = document.querySelector('input');
// 输入框最终需要调用的函数
const event = () => {
console.log(oInput.value);
}
// 防抖函数
function debounce(fn, delay) {
let timer = null;
return function () {
clearTimeout(timer)
console.log('调用了debounce');
timer = setTimeout(() => {
fn()
}, delay)
}
}
// 将输入框最终需要调用的函数放入防抖函数中
const inputEvent = debounce(event, 2000)
// 通过addEventListener监听输入框的input事件,一旦输入,执行inputEvent
oInput.addEventListener('input', inputEvent)
</script>
</body>
</html>
2.什么是节流
我的理解是一段时间内,只执行一次事件调用,这个时间段内,不论如何都不会触发第二次事件调用。
就比如一个按钮,设置点击事件,点击之后执行,但是在接下来的2秒内多次点击无效,只能等待这2秒过去,才能再次触发。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>按钮</button>
<script>
// 获取按钮DOM元素
const oButton = document.querySelector('button')
// 按钮最终需要调用的函数
const event = () => {
console.log('通过节流函数,点击按钮了');
}
// 节流函数
const throttle = (fn, delay) => {
let timer = null;
return function () {
if (timer) return
fn();
timer = setTimeout(() => { timer = null }, delay);
}
}
// 将按钮最终需要调用的函数放入节流函数中
const buttonEvent = throttle(event, 2000)
// 通过addEventListener监听按钮的点击事件,一旦点击,执行buttonEvent
oButton.addEventListener('click', buttonEvent)
</script>
</body>
</html>