js函数防抖和函数节流

「爱情、让人受尽委屈。」 2022-11-22 05:21 137阅读 0赞

js函数防抖和函数节流函数  
函数防抖(debounce.js)：**就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。**

函数节流（throttle.js）：**就是指连续触发事件但是在 n 秒中只执行一次函数。**

**debounce.js**

/**
     * 函数防抖
     * 函数被频繁调用时使用
     * 使用方法参考lodash 的 debounce 函数
     * @author lzs
     */
    
    
    const freeGlobal = typeof global == 'object' && global !== null && global.Object === Object && global
    /** Detect free variable `self`. */
    const freeSelf = typeof self == 'object' && self !== null && self.Object === Object && self
    /** Used as a reference to the global object. */
    const root = freeGlobal || freeSelf || Function('return this')()
    
    function isObject(value) {
      const type = typeof value
      return value != null && (type == 'object' || type == 'function')
    }
    
    /**
     * 防抖函数
     * @param {Function} func  执行的函数
     * @param {Number} wait  函数执行的延时 时长
     * @param {Object} options
     */
    function debounce(func, wait, options) {
      let lastArgs,
        lastThis,
        maxWait,
        result,
        timerId,
        lastCallTime
    
      // 参数初始化
      let lastInvokeTime = 0
      let leading = false
      let maxing = false
      let trailing = true
    
      // Bypass `requestAnimationFrame` by explicitly setting `wait=0`.
      const useRAF = (!wait && wait !== 0 && typeof root.requestAnimationFrame === 'function')
    // 基本的类型判断和处理
      if (typeof func != 'function') {
        throw new TypeError('Expected a function')
      }
      wait = +wait || 0
      if (isObject(options)) {
        leading = !!options.leading
        maxing = 'maxWait' in options
        maxWait = maxing ? Math.max(+options.maxWait || 0, wait) : maxWait
        trailing = 'trailing' in options ? !!options.trailing : trailing
      }
    
      function invokeFunc(time) {
        const args = lastArgs
        const thisArg = lastThis
    
        lastArgs = lastThis = undefined
        lastInvokeTime = time
        result = func.apply(thisArg, args)
        return result
      }
    
      function startTimer(pendingFunc, wait) {
        if (useRAF) {
          return root.requestAnimationFrame(pendingFunc)
        }
        return setTimeout(pendingFunc, wait)
      }
    
      function cancelTimer(id) {
        if (useRAF) {
          return root.cancelAnimationFrame(id)
        }
        clearTimeout(id)
      }
    
      function leadingEdge(time) {
        // Reset any `maxWait` timer.
        lastInvokeTime = time
        // Start the timer for the trailing edge.
        timerId = startTimer(timerExpired, wait)
        // Invoke the leading edge.
        return leading ? invokeFunc(time) : result
      }
    
      function remainingWait(time) {
        const timeSinceLastCall = time - lastCallTime  // 距离上次debounced函数被调用的时间
        const timeSinceLastInvoke = time - lastInvokeTime // 距离上次函数被执行的时间
        const timeWaiting = wait - timeSinceLastCall // 用 wait 减去 timeSinceLastCall 计算出下一次trailing的位置
    
        // 两种情况
        // 有maxing:比较出下一次maxing和下一次trailing的最小值，作为下一次函数要执行的时间
        // 无maxing：在下一次trailing时执行 timerExpired
        return maxing ?
          Math.min(timeWaiting, maxWait - timeSinceLastInvoke) :
          timeWaiting
      }
      //根据时间判断 func 能否被执行
      function shouldInvoke(time) {
        const timeSinceLastCall = time - lastCallTime
        const timeSinceLastInvoke = time - lastInvokeTime
    
        // Either this is the first call, activity has stopped and we're at the
        // trailing edge, the system time has gone backwards and we're treating
        // it as the trailing edge, or we've hit the `maxWait` limit.
        return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
          (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait))
      }
    
      function timerExpired() {
        const time = Date.now()
        if (shouldInvoke(time)) {
          return trailingEdge(time)
        }
        // Restart the timer.
        timerId = startTimer(timerExpired, remainingWait(time))
      }
    
      function trailingEdge(time) {
        timerId = undefined
    
        // Only invoke if we have `lastArgs` which means `func` has been
        // debounced at least once.
        if (trailing && lastArgs) {
          return invokeFunc(time)
        }
        lastArgs = lastThis = undefined
        return result
      }
    
      function cancel() {
        if (timerId !== undefined) {
          cancelTimer(timerId)
        }
        lastInvokeTime = 0
        lastArgs = lastCallTime = lastThis = timerId = undefined
      }
    
      function flush() {
        return timerId === undefined ? result : trailingEdge(Date.now())
      }
    
      function pending() {
        return timerId !== undefined
      }
    
      function debounced(...args) {
        const time = Date.now()
        const isInvoking = shouldInvoke(time)
    
        lastArgs = args
        lastThis = this
        lastCallTime = time
    
        if (isInvoking) {
          if (timerId === undefined) {
            return leadingEdge(lastCallTime)
          }
          if (maxing) {
            // Handle invocations in a tight loop.
            timerId = startTimer(timerExpired, wait)
            return invokeFunc(lastCallTime)
          }
        }
        if (timerId === undefined) {
          timerId = startTimer(timerExpired, wait)
        }
        return result
      }
      debounced.cancel = cancel
      debounced.flush = flush
      debounced.pending = pending
      return debounced
    }
    
    export default debounce

节流函数  
**throttle.js**

import debounce from './debounce.js'
    
    
    function isObject(value) {
        const type = typeof value
        return value != null && (type == 'object' || type == 'function')
      }
    
    function throttle(func, wait, options) {
      let leading = true
      let trailing = true
    
      if (typeof func !== 'function') {
        throw new TypeError('Expected a function')
      }
      if (isObject(options)) {
        leading = 'leading' in options ? !!options.leading : leading
        trailing = 'trailing' in options ? !!options.trailing : trailing
      }
      return debounce(func, wait, {
        leading,
        trailing,
        'maxWait': wait
      })
    }
    
    export default throttle