函数方法
这些是处理函数的实用方法。
debounce(func, wait, [options])
创建一个防抖函数,该函数会从上一次被调用后,延迟 wait 毫秒后调用 func 方法。
使用示例
ts
import { debounce } from 'xfunc'
const debouncedHandler = debounce(() => {
console.log('Called after 300ms delay')
}, 300)
// 在事件处理器中使用
searchInput.addEventListener('input', debouncedHandler)参数
func(Function): 要防抖的函数wait(number): 需要延迟的毫秒数[options](Object): 选项对象[options.leading=false](boolean): 指定是否在延迟开始前调用[options.trailing=true](boolean): 指定是否在延迟结束后调用
返回值
(Function): 返回新的防抖函数
throttle(func, wait, [options])
创建一个节流函数,在 wait 秒内最多执行 func 一次的函数。
使用示例
ts
import { throttle } from 'xfunc'
const throttledHandler = throttle(() => {
console.log('Scroll event handled')
}, 100)
window.addEventListener('scroll', throttledHandler)参数
func(Function): 要节流的函数wait(number): 需要节流的毫秒数[options](Object): 选项对象[options.leading=true](boolean): 指定是否在节流开始前调用[options.trailing=true](boolean): 指定是否在节流结束后调用
返回值
(Function): 返回新的节流函数
说明
- 防抖适用于搜索输入和表单验证
- 节流适用于滚动处理器和调整大小事件
- 两个函数都保留原始函数的上下文和参数
memoize(func, [options])
创建一个缓存函数调用结果的记忆化函数。
使用示例
ts
import { memoize } from 'xfunc'
const fibonacci = memoize((n: number): number => {
return n < 2 ? n : fibonacci(n - 1) + fibonacci(n - 2)
})
fibonacci(10)
// => 55 (计算并缓存)
fibonacci(10)
// => 55 (从缓存返回)
// 使用自定义解析器
const getObject = memoize((id: number) => {
return fetch(`/api/users/${id}`).then(res => res.json())
}, {
resolver: (id) => `user_${id}`,
maxSize: 100
})参数
func(Function): 要记忆化的函数[options](Object): 选项对象[options.maxSize](number): 最大缓存大小,默认无限制[options.resolver](Function): 生成缓存键的函数
返回值
(Function): 返回新的记忆化函数
说明
- 使用 QueueMap 进行高效的缓存管理,支持大小限制
- 保留原始函数的上下文和参数
- 默认缓存键是参数的 JSON.stringify 结果
- 适用于昂贵的计算和递归函数