跳到主要内容

防抖节流工具

提供了节流（throttle）和防抖（debounce）功能，帮助控制函数的执行频率。

节流（Throttle）​

节流确保在指定时间间隔内最多执行一次函数。

基于时间的节流​

// 基本用法 - 1000毫秒内最多执行一次
Utils.throttle(1000, "button_click", () => {
    // 执行的代码
    Log.info("按钮被点击了");
});

// 带上下文的用法
var context = {"userId": 123, "userName": "张三"};
Utils.throttle(context, 1000, "user_action", (data) => {
    // 可以访问context中的变量
    Log.info("用户 " + userName + " 执行了操作: " + data);
}, "保存数据");

基于Tick的节流​

// 20 tick内最多执行一次（约1秒）
Utils.throttleTick(20, "game_update", () => {
    // 游戏更新逻辑
    Log.info("游戏状态更新");
});

// 带上下文的Tick节流
var gameContext = {"level": 5, "score": 1000};
Utils.throttleTick(gameContext, 20, "score_update", () => {
    Log.info("等级 " + level + " 分数更新: " + score);
});

防抖（Debounce）​

防抖确保在连续触发时，只在最后一次触发后延迟执行。

基于时间的防抖​

// 基本用法 - 在最后一次调用后500毫秒执行
Utils.debounce(500, "search_input", () => {
    // 执行搜索
    Log.info("执行搜索");
});

// 带参数的防抖
Utils.debounce(300, "save_draft", (content) => {
    // 保存草稿
    Log.info("保存草稿: " + content);
}, "用户输入的内容");

// 带上下文的防抖
var searchContext = {"searchType": "user", "filters": ["active"]};
Utils.debounce(searchContext, 500, "advanced_search", (query) => {
    Log.info("执行" + searchType + "搜索: " + query);
}, "搜索关键词");

基于Tick的防抖​

// 10 tick后执行（约0.5秒）
Utils.debounceTick(10, "auto_save", () => {
    Log.info("自动保存");
});

// 带上下文的Tick防抖
var saveContext = {"autoSave": true, "version": 1};
Utils.debounceTick(saveContext, 10, "document_save", () => {
    Log.info("文档版本 " + version + " 自动保存");
});

实际使用场景​

1. 按钮防重复点击​

// 防止用户快速连续点击提交按钮
Utils.throttle(2000, "submit_button", () => {
    // 提交表单
    submitForm();
});

2. 搜索输入防抖​

// 用户输入时，等待停止输入300ms后才执行搜索
Utils.debounce(300, "search_query", (query) => {
    // 执行搜索API调用
    performSearch(query);
}, searchInput);

3. 滚动事件节流​

// 滚动时最多每100ms执行一次
Utils.throttle(100, "scroll_handler", () => {
    // 处理滚动逻辑
    updateScrollPosition();
});

4. 游戏状态更新​

// 每20 tick更新一次游戏状态
Utils.throttleTick(20, "game_state", () => {
    updateGameLogic();
});

// 玩家移动后5 tick保存位置
Utils.debounceTick(5, "player_position", () => {
    savePlayerPosition();
});

管理函数​

清除特定的节流或防抖​

// 清除特定key的节流记录
Utils.clearThrottle("button_click");

// 清除特定key的防抖任务
Utils.clearDebounce("search_input");

清除所有记录​

// 清除所有节流记录
Utils.clearAllThrottle();

// 清除所有防抖任务
Utils.clearAllDebounce();

注意事项​

  1. key的唯一性: 确保为不同的功能使用不同的key，避免冲突
  2. 内存管理: 长期运行的应用建议定期清理不再使用的记录
  3. 时间单位:
    • 普通方法使用毫秒（ms）
    • Tick方法使用游戏tick（通常1 tick = 50ms）
  4. 上下文传递: 上下文中的变量可以在闭包中直接使用

性能建议​

  • 对于高频事件（如鼠标移动、滚动），建议使用节流
  • 对于用户输入（如搜索框、表单验证），建议使用防抖
  • 根据实际需求选择合适的延迟时间，平衡用户体验和性能