手写防抖函数debounce和节流函数throttle

防抖 debounce

  • 定义:函数被触发时,需要先延迟,在延迟的时间内,如果再次被触发,则取消之前的延迟,重新开始延迟。这样就能达到,只响应最后一次,其余的请求都过滤掉。某个函数在短时间内只执行最后一次。
function debounce(fn, delay, immedia = false) {
  let timer = null
  return () => {
    if (timer) clearTimeout(timer)
    // 首次立即执行
    if (immedia && !timer) {
      fn.call(this)
      timer = setTimeout(() => {
        timer = null
      }, delay)
    }
    timer = setTimeout(() => {
      fn.call(this)
      timer = null
    }, delay)
  }
}

限流 throttle。

  • 定义: 多次触发同一个函数,同一段时间内只执行一次
function throttle() {
  let previous = 0
  return () => {
    const now = Date.now()
    if (now - previous > delay) {
      fn.call(this)
      previous = Date.now()
    }
  }
}
上一篇:lgP3731 [HAOI2017]新型城市化


下一篇:基于css的一些动画