編程中常用到的功能函數記錄

前言

在編程的過程中，我們經常會遇到一些通用的功能需求，例如防抖功能，節流功能等。爲了提高開發效率和代碼重用性，我們可以整理並記錄一些常用的功能函數。本文將介紹一些在編程中常用到的功能函數，希望對讀者有所幫助。

正文

防抖函數的使用

當我們在編寫JavaScript代碼時，經常會遇到需要處理頻繁觸發的事件，如窗口大小調整、按鈕點擊等。如果我們直接在事件處理函數中執行相關操作，可能會導致性能問題或產生意外行爲。爲了解決這個問題，我們可以使用防抖函數（Debounce Function）來限制事件的觸發頻率。

防抖函數的作用是在事件持續觸發後，等待一段時間後再去執行相關操作，如果在這段時間內事件再次觸發，將重新計時。這樣可以確保只有在事件觸發停止一段時間後纔會執行相關操作，從而避免了不必要的重複操作。

下面是一個常見的防抖函數的實現：

function debounce(func, delay) {
  let timer;

  return function(...args) {
    clearTimeout(timer);

    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

該防抖函數接受兩個參數：func 表示要執行的函數，delay 表示延遲的時間間隔。在 func 函數被調用後，如果在 delay 毫秒內再次觸發，將重新計時延遲執行。只有在最後一次觸發後等待了足夠的時間（即沒有再次觸發），func 函數纔會被真正執行。

使用方法

function handleFun() {
  // 實際要執行的功能代碼
  console.log("run");
}
// 回調函數綁定 debounceHandle
const debounceHandle = debounce(handleFun, 500);

防抖函數是一種常見的優化技術，可以限制事件的觸發頻率，在高頻率事件場景下解決性能問題。通過合理地使用防抖函數，我們可以更好地控制事件的觸發和相應操作的執行，提升代碼質量和用戶體驗

節流函數

當我們在編寫JavaScript代碼時，經常會遇到需要控制事件觸發頻率的情況，如滾動事件、鼠標移動事件等。爲了避免頻繁觸發事件導致性能問題，我們可以使用節流函數（Throttle Function）來限制事件的觸發頻率。

節流函數的作用是在一定時間內只允許事件觸發一次，即使在這段時間內事件被多次觸發，也只執行一次相關操作。這樣可以確保事件處理函數按一定的頻率執行，避免過多的計算或請求，優化代碼性能。

下面是一個常見的節流函數的實現：

function throttle(func, delay) {
  let timer;
  let lastExecutionTime = 0;

  return function(...args) {
    const currentTime = Date.now();
    const remainingTime = delay - (currentTime - lastExecutionTime);

    clearTimeout(timer);

    if (remainingTime <= 0) {
      func.apply(this, args);
      lastExecutionTime = currentTime;
    } else {
      timer = setTimeout(() => {
        func.apply(this, args);
        lastExecutionTime = Date.now();
      }, remainingTime);
    }
  };
}

該節流函數接受兩個參數：func 表示要執行的函數，delay 表示時間間隔。在 func 函數被調用後，如果在 delay 毫秒內再次觸發，將忽略該次觸發。只有當距離上次執行的時間超過 delay 時，func 函數纔會被再次執行，並更新最後一次執行的時間。

使用方法

function handleScroll() {
  // 執行滾動事件相關操作
  console.log("Window is scrolling");
}

const throttleHandleScroll = throttle(handleScroll, 200);

window.addEventListener("scroll", throttleHandleScroll);

在上述代碼中，我們定義了一個 handleScroll 函數來處理滾動事件相關的操作。然後，使用 throttle 函數創建了一個節流的處理函數 throttleHandleScroll，將 handleScroll 函數作爲參數傳入，並設置時間間隔爲 200 毫秒。最後，我們通過 addEventListener 方法添加了滾動事件監聽器，並在事件觸發時調用節流處理函數。

通過使用節流函數，當用戶頻繁地滾動窗口時，只有在一定的時間間隔內纔會執行滾動事件的處理邏輯，從而避免了不必要的計算和操作，提升了性能。

節流函數是一種常見的優化技術，可以限制事件的觸發頻率，在高頻率事件場景下解決性能問題。通過合理地使用節流函數，我們可以控制事件觸發的速率，優化代碼的執行效率和用戶體驗

函數柯里化

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function (...moreArgs) {
        return curried.apply(this, args.concat(moreArgs));
      };
    }
  };
}

函數組合

/**
 * 函數組合
 * @template T
 * @param {...function(T): T} functions - 需要組合的函數列表
 * @returns {function(T): T} - 組合後的函數
 */
export function compose(...functions) {
    /**
     * 組合後的函數
     * @param {T} input - 輸入值
     * @returns {T} - 輸出值
     */
    return function (input) {
        return functions.reduceRight(function (acc, fn) {
            /**
             * 中間結果
             * @type {T}
             */
            return fn(acc)
        }, input)
    }
}

函數記憶

/**
 * 記憶函數
 * @template T
 * @param {(...args: any[]) => T} func - The function to be memoized.
 * @return {(...args: any[]) => T} - The memoized function.
 */
function memoize(func) {
    const cache = {}

    return function(...args) {
        const key = JSON.stringify(args)

        if (cache[key]) {
            return cache[key]
        } else {
            const result = func.apply(this, args)
            cache[key] = result
            return result
        }
    }
}

使用案例

計算斐波那契數的一個簡單實現

function fib(n) {
  if (n < 2) {
    return n;
  } else {
    return fib(n-1) + fib(n-2);
  }
}

const memoizedFib = memoize(fib);

console.log(memoizedFib(10)); // 第10個斐波那契數，結果爲 55
console.log(memoizedFib(10)); // 直接從緩存中獲取結果，不再計算

後記

持續擴充中......