防抖:高频率触发事件,只取最后一次事件处理的结果
应用场景:1.input事件搜索框。2.window窗体调整大小。
实现例子:
<body>
<input type="text">
<script>
const input = document.querySelector('input')
input.oninput = debounce(function () {
console.log(this.value);
}, 1000)
// 封装防抖函数
function debounce(fn, delay) {
let timer; //创建一个标记得到setTimeout
return function () {
//如果在delay时间内再次触发滚动事件,那么当前的计时取消,重新开始计时
if (timer) {
clearTimeout(timer) //清除掉前一个定时
}
//如果在delay时间内没有再次触发滚动事件,那么就执行函数
timer = setTimeout(() => {
fn.call(this)// 业务代码执行地
}, delay)
}
}
</script>
</body>
节流:高频率触发事件,取第一次事件处理
应用场景:1.滚动事件。2.鼠标点击事件。
<body>
<script>
window.onscroll = throttle(function () {
console.log('滚动了', this);
}, 1000)
function throttle(fn, delay) {
let flag = true;//照样是创建一个标记,默认为true
return function () {
if (flag) {
//默认情况下执行业务函数,当第一次触发事件后,flag变为false.
//经过delay时间后,执行业务函数,才恢复flag=true.
setTimeout(() => {
fn.call(this)//业务函数
flag = true
}, delay)
}
flag = false
}
}
</script>
</body>