一、防抖
有的操作是高频触发的，但是其实触发一次就好了
- 输入框监听用户输入的内容
- window调整resize大小
<input type="text" />
<script>
// 防抖函数
function debounce(fn, delay) {
let timer = null
return function() {
clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, arguments)
}, delay)
}
}
// 使用防抖函数
const input = document.querySelector('input')
input.onkeydown = debounce((event) => {
console.log(event);
console.log(input.value);
}, 500)
</script>
总结： 防抖是在高频触发的条件下, 只会生效最后一次, 适用于只需要触发一次的场景
一、节流
防抖存在一个问题，事件会一直等到用户完成操作一段时间后再操作。如果一直操作，就一直不会触发。如果是一个按钮发送请求，一直点击，那么就一直不会触发。
- 滑道底部自动加载更多
- 也可用于输入框中
<input type="text" />
<script>
// 节流函数
function throttle(fn, delay) {
let valid = true
return function() {
if(valid) {
setTimeout(() => {
fn.apply(this, arguments)
valid = true
}, delay);
valid = false
} else {
return false
}
}
}
// 使用节流函数
const input = document.querySelector('input')
input.oninput = throttle(function(event) {
console.log(event.target.value);
}, 500)
</script>
总结： 节流是在高频触发的条件下, 间隔时间内只会触发一次，适用于间隔固定时间触发
