深扒Lodash防抖函数源码——揭秘其节流防抖的实现原理

前端

2023-12-07 20:03:29

好的，以下是根据您的输入生成的专业级文章：

#Lodash防抖函数源码解读#

一、前言

听说你浅浅的微笑就像乌梅子酱~

为什么要记笔记？因为老师常说好记性不如烂笔头呀~ 首先，防抖(debounce)和节流(throttle) 是 JavaScript 的一个非常重要的知识点，

二、认识防抖

在计算机编程中，防抖（debounce）是一种技术，用于限制函数在短时间内只能被调用一次。这通常用于防止因用户快速点击或输入而导致函数被不必要地多次调用。例如，在搜索框中输入时，我们通常会使用防抖来防止在每次击键时都发送搜索请求。

防抖的原理很简单：

当函数被调用时，会启动一个计时器。
如果在计时器到期之前函数再次被调用，计时器将被重置。
只有当计时器到期后，函数才会真正执行。

三、Lodash防抖函数源码解析

Lodash的防抖函数是一个非常强大的工具，它可以帮助我们轻松地实现防抖功能。

function debounce(func, wait, options = {}) {
  let lastArgs, lastThis, maxWait, result, timerId, lastCallTime;

  let leading = options.leading;
  let trailing = 'trailing' in options ? options.trailing : true;

  if (typeof func != 'function') {
    throw new TypeError('Expected a function');
  }
  wait = Number(wait) || 0;
  if (isNaN(wait)) {
    throw new TypeError('Expected number for delay');
  }
  maxWait = Number(maxWait) || 0;
  if (isNaN(maxWait)) {
    throw new TypeError('Expected number for maxWait');
  }

  function invokeFunc(time) {
    lastCallTime = time;
    result = func.apply(lastThis, lastArgs);
    if (!timerId) {
      lastArgs = lastThis = null;
    }
  }

  function leadingEdge(time) {
    // Reset timerId and trailing timer because we should not invoke func at the same time.
    if (timerId) {
      clearTimeout(timerId);
    }
    if (maxWait !== wait) {
      timerId = setTimeout(trailingEdge, maxWait - (time - lastCallTime));
    }
    invokeFunc(time);
  }

  function trailingEdge(time) {
    timerId = null;
    if (trailing && lastArgs) {
      invokeFunc(time);
    }
    lastArgs = lastThis = null;
  }

  function cancel() {
    if (timerId) {
      clearTimeout(timerId);
    }
    lastArgs = lastThis = null;
  }

  function flush() {
    if (timerId) {
      clearTimeout(timerId);
    }
    invokeFunc(Date.now());
  }

  function debounced() {
    let currentTime = Date.now();
    let timeSinceLastCall = currentTime - lastCallTime;
    let timeSinceLastInvoke = currentTime - 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 at the
    // trailing edge, or we're in the trailing gap.
    const leadingCall = leading && (!lastCallTime || (timeSinceLastCall >= wait));

    // Invoke the leading call immediately, unless the timer has been cleared.
    if (leadingCall) {
      lastCallTime = currentTime;
      invokeFunc(currentTime);
    }
    // Start the timer if we're not leading.
    if (timerId === null && trailing) {
      timerId = setTimeout(trailingEdge, wait - timeSinceLastInvoke);
    }

    return result;
  }
  debounced.cancel = cancel;
  debounced.flush = flush;
  return debounced;
}