美文网首页
节流函数 防抖函数

节流函数 防抖函数

作者: 曼少女 | 来源:发表于2020-08-11 19:09 被阅读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))

相关文章

网友评论

      本文标题:节流函数 防抖函数

      本文链接:https://www.haomeiwen.com/subject/uiiydktx.html