防抖
防抖策略(debounce)是当事件被触发后,延迟n秒后再执行回调,如果在这n秒内事件又被触发,则重新计时。
防抖的应用场景
用户在输入框中连续输入一串字符时,可以通过防抖策略,只在输入完后,才执行查询的请求,这样可以有效减少请求次数,节约请求资源;
好处: 能够保证用户在频繁触发某些事件的时候,不会频繁的执行回调,只会被执行一次
<input type="text" placeholder="请输入书名" />
<button>发请求呀</button>
let timeId
let bn = document.querySelector('input')
// input:只要内容变化,就会触发
bn.addEventListener('input', function() {
// 先清除之前的延迟器
clearTimeout(timeId)
if (bn.value == '') return
// 将请求添加到一个延迟器
// 再开启一个新的延迟器--重新计时
timeId = setTimeout(function() {
axios({
url: '',
params: {
bookname: bn.value
}
}).then(res => {
console.log(res)
})
}, 1000)
})
节流
节流策略(throttle)指的是:单位时间内,频繁触发同一个操作,只会触发一次
节流的应用场景
① 鼠标连续不断地触发某事件(如点击),只在单位时间内只触发一次;
② 懒加载时要监听计算滚动条的位置,但不必每次滑动都触发,可以降低计算的频率,而不必去浪费 CPU 资源;
let bn = document.querySelector('button')
let flag = true
// input:只要内容变化,就会触发
bn.addEventListener('click', function() {
if (flag == false) return
flag = false
axios({
url: ''
}).then(res => {
console.log(res)
flag = true
})
})
防抖和节流的区别
防抖:如果事件被频繁触发,防抖保证只能有一次触发生效,前面N多次触发都会被忽略.
节流:如果单位时间内被频繁触发,节流就能减少事件触发的频率,因此,节流是有选择性的执行一部分事件.
总结:
节流(throttle)与 防抖(debounce)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象等。