函数防抖、节流及其简单实现

函数防抖

防抖就是触发事件后,在 n 秒后函数会执行一次,如果在 n 秒内又触发了事件,则会重新计算函数延时执行的时间

// 非立即执行版
function debounce (fn, delay) {
  let timer
  return function () {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, arguments)
    }, delay)
  }
}

// 立即执行版
function debounce (fn, delay) {
  let timer
  return function () {
    if (timer) clearTimeout(timer)
    else fn.apply(this, arguments)
    timer = setTimeout(() => {
      timer = null
    }, delay)
  }
}

函数节流

节流就是指连续触发事件但是在 n 秒中保证且只会执行一次函数

// 非立即执行版
function throttle (fn, delay) {
  let time = Date.now()
  return function () {
    let newTime = Date.now()
    if (newTime - time > delay) {
      fn.apply(this, arguments)
      time = newTime
    }
  }
}

// 立即执行版
function throttle (fn, delay) {
  let time
  return function () {
    let newTime = Date.now()
    if (!time || newTime - time > delay) {
      fn.apply(this, arguments)
      time = newTime
    }
  }
}
除特殊说明外本人博客均属原创,转载请注明出处:http://blog.johnhan.cn/blog_1102.html
京ICP备19044523号-1