编程中常用到的功能函数记录

前言

在编程的过程中，我们经常会遇到一些通用的功能需求，例如防抖功能，节流功能等。为了提高开发效率和代码重用性，我们可以整理并记录一些常用的功能函数。本文将介绍一些在编程中常用到的功能函数，希望对读者有所帮助。

正文

防抖函数的使用

当我们在编写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)); // 直接从缓存中获取结果，不再计算

后记

持续扩充中......