防抖、节流

防抖 debounce

在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时。

• 监听一个输入框的文字变化后触发 change 事件
• 直接用 keyup 事件，则会频繁触发 change 事件
• 防抖：用于输入结束或暂停时，才会触发 change 事件

const input1 = document.getElementById('input1')
function debounde(fn, delay = 500) {
  let timer = null
  return function() {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments)
      timer = null
    }, delay)
  }
}
input1.addEventListener('keyup', debounde(() => {
  console.log(input1.value)
}, 400))

节流 throttle

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

• 拖拽一个元素时，要随时拿到该元素被拖拽的位置
• 直接用 drag 事件，则会频繁触发，很容易导致卡顿
• 节流：无论拖拽速度多快，都会每隔 100ms 触发一次

const div1 = document.getElementById('div1')

function throttle(fn, delay = 100) {
  let timer = null
  return function() {
    if (timer) {
      return
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments)
      timer = null
    }, delay);
  }
}
div1.addEventListener('drag', throttle((e) => {
  console.log(e.offsetX, e.offsetY)
}))

阅读量：

评 论：