函数相关操作

介绍

目前包含了防抖、节流的封装

开始使用

npm install hongfangze-function

具体前端使用方式见包内demo文件

// import { throttle,debounce } from "hongfangze-function";
// import * as hfzfunction from "hongfangze-function";

/**
 * 函数防抖
 * - 简单的说，当一个动作连续触发，只执行最后一次。
 * - 打个比方，坐公交，司机需要等最后一个人进入才能关门。每次进入一个人，司机就会多等待几秒再关门。
 * - 函数防抖（debounce）的应用场景：\
 * 连续的事件，只需触发一次的回调场景有：\
 * 1、搜索框搜索输入。只需要用户最后一次输入完再发送请求 \
 * 2、手机号、邮箱格式的输入验证检测 \
 * 3、窗口大小的 resize 。只需窗口调整完成后，计算窗口的大小，防止重复渲染。 \
 * - 调用示例：\
 * const input1 = document.getElementById('input1'); \
 * input1.addEventListener('keyup', debounce(function () { \
 *      console.log(input1.value); \
 * }, 600)) \
 * @param {Function} fn 实际运行的函数
 * @param {number} [delay] 多少时间内的重复调用将被忽略，单位毫秒，默认300
 * @return {*}
 */
export declare const debounce: (fn: any, delay?: number) => any;
/**
 * 函数节流
 * - 限制一个函数在一定时间内只能执行一次
 * - 举个例子，乘坐地铁，过闸机时，每个人进入后3秒后门关闭，等待下一个人进入。
 * 函数节流（throttle）的应用场景：\
 * 间隔一段时间执行一次回调的场景有：\
 * 1、滚动加载，加载更多或滚动到底部监听 \
 * 2、谷歌搜索框，搜索联想功能 \
 * 3、高频点击提交，表单重复提交 \
 * 4、省市信息对应字母快速选择 \
 * - 调用示例：\
 * let div1 = document.getElementById('div1'); \
 * div1.addEventListener('drag', throttle(function(e) { \
 *     console.log(e.offsetX, e.offsetY); \
 *  }, 100));
 * @param {Function} func 实际运行的函数
 * @param {number} [wait] 多少时间内的重复调用将被忽略，单位毫秒，默认300
 * @param {boolean} [immediate] 是否立即执行（即忽略本次节流）
 * @return {*}  {*}
 */
export declare const throttle: (func: Function, wait?: number, immediate?: boolean) => any;

版本迭代记录

2025-04-07 v1.0.0

• 实现函数防抖、函数节流。