编程中常用到的功能函数记录
前言
在编程的过程中，我们经常会遇到一些通用的功能需求，例如防抖功能，节流功能等。为了提高开发效率和代码重用性，我们可以整理并记录一些常用的功能函数。本文将介绍一些在编程中常用到的功能函数，希望对读者有所帮助。
正文
防抖函数的使用
当我们在编写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)); // 直接从缓存中获取结果，不再计算
后记
持续扩充中......
