-
两者区别
-
分别用于什么场景
防抖
防止抖动“你先抖动着，啥时候停了，再执行下一步”
-
例如，一个搜索输入框，（你先慢慢输入抖动）等输入停止之后，再触发搜索
<input type="text" id="input1">
<script>
function debounce (fn, delay = 200) {
let timer = 0
return function () {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = 0
}, delay);
}
}
const input1 = document.getElementById('input1')
input1.addEventListener('keyup', debounce(() => {
console.log('发起搜索', input1.value)
}, 1000))
</script>
节流
节省交互沟通。流，不一定指流量。
- 当一个事件执行后，隔一段时间才能再去触发塔
- 例如，drag 或 scroll 期间触发某个回调，要设置一个时间间隔
<div id="div1" draggable="true" style="width:100px;height:50px;background-color:#ccc;"></div>
<script>
function throttle (fn, delay = 100) {
let timer;
return function () {
if (timer) return
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = 0
}, delay);
}
}
const div1 = document.getElementById('div1')
div1.addEventListener('drag', throttle((e) => {
console.log('鼠标的位置', e.offsetX, e.offsetY)
}, 1000))
</script>
