节流函数 防抖函数

2020-08-11  本文已影响0人  曼少女

防抖函数(debounce)

当持续触发事件时,在一定的时间段内没有触发事件,事件才会让函数调用一次,如果一定的你时间内触发事件,就重新开始计算

实现

// debounce_.js
function debounce_ (fn, delay) {
  let timer = null
  return function () {
    if (timer !== null) clearTimeout(timer)
    timer = setTimeout(fu, delay)
  }
}
function handleEvent () {
  console.log('我来了')
}
window.addEventListener('scroll', debounce_(handleEvent, 1000))

节流函数(throttle)

当持续触发事件时,在一定时间内触发保证只调用一次处理事件

function throttle (fn, delay) {
  let prev = Date.now()
  return function () {
    let now = Date.now()
    let seft = this
    let args = arguments
    if (now - prev >= delay) {
      fn.apply(seft, args)
      prev = Date.now()
    }
  }
}
function handleEvent () {
  console.log('我来了')
}
window.addEventListener('scroll', throttle(handleEvent, 1000))
上一篇下一篇

猜你喜欢

热点阅读