JS常见面试题 -- 函数防抖与函数节流

• 相同点： 防抖和节流都是防止函数多次调用，在时间轴上控制函数的执行次数

• 区别：

  • 防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时，先计算时间后执行

  • 节流：让函数在特定时间内就执行一次

• 适用场景：

  • 防抖：监听窗口的滚动，缩放，高频发生的一些事件
  • 节流：涉及与后端交互的按钮，由于网络原因或者其他原因，导致接口没有返回值，用户一直点点点的问题

防抖函数

// 防抖,非立即执行
function debounce(fn,delay) {
    
    
  let timer = null
  return (...rest) => {
    
    
    timer && clearTimeout(timer)
    timer = setTimeout(() => {
    
    
      fn.apply(this, rest)
    },delay)
  }
}

window.onscroll = debounce(() => {
    
    
  console.log(this)
}, 500)

// 防抖,立即执行
function debounce (func, time) {
    
    
  let timer = null
  let flag = true
  return function (...args) {
    
    
    timer && clearTimeout(timer)
    if (flag) {
    
    
      func.apply(this, args)
      flag = false
    }
    timer = setTimeout(() => {
    
    
      flag = true
    }, time)
  }
}

window.onscroll = debounce(() => {
    
    
  console.log(this)
}, 500)

// 防抖,合并版
function debounce (func, time = 500, isImmediate = false) {
    
    
  let timer = null
  let flag = true
  // isImmediate = true 立即执行
  if (isImmediate) {
    
    
    return function (...args) {
    
    
      timer && clearTimeout(timer)
      if (flag) {
    
    
        func.apply(this, args)
        flag = false
      }
      timer = setTimeout(() => {
    
    
        flag = true
      }, time)
    }
  }
  // isImmediate = false 非立即执行
  return function (...args) {
    
    
    timer && clearTimeout(timer)
    timer = setTimeout(() => {
    
    
      func.apply(this, args)
    }, time)
  }  
}

节流函数

// 节流
function throttle (f, wait) {
    
    
  let timer = null
  return (...args) => {
    
    
    if (timer) return
    timer = setTimeout(() => {
    
    
      f(...args)
      timer = null
    }, wait)
  }
}