节流函数 防抖函数

防抖函数(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))
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。