HarmonyOS鸿蒙Next中ArkTS优雅的实现app内防抖

可以封装一个工具类或者命名空间通过获取系统时间实现点击防抖

封装代码实现

import { systemDateTime } from '@kit.BasicServicesKit'

export namespace click {
  let lastClickTime: number = 0

  export const onClick = (fun: Callback<ClickEvent>, jitterTime: number = 500) => {
    return (event: ClickEvent) => {
      const subTime = systemDateTime.getTime() - lastClickTime
      if (subTime < jitterTime) {
        return
      }
      lastClickTime = systemDateTime.getTime()
      fun(event)
    }
  }
}

调用处

Text('防抖测试').onClick(click.onClick(() => {
  console.log(`----> onClick ${systemDateTime.getTime()}`)
}))

连续快速点击测试日志打印

需要做防抖但是没有思路的小伙伴可以试试这个方案

更多关于HarmonyOS鸿蒙Next中ArkTS优雅的实现app内防抖的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 1楼•7 天前

在HarmonyOS鸿蒙Next中，使用ArkTS实现应用内防抖可以通过@State和@Watch装饰器结合setTimeout来实现。以下是一个简单的示例：

@Entry
@Component
struct DebounceExample {
  @State private searchText: string = '';
  private debounceTimer: number | null = null;

  build() {
    Column() {
      TextInput({ placeholder: 'Search...' })
        .onChange((value: string) => {
          this.handleInputChange(value);
        })
      Text(this.searchText)
    }
  }

  private handleInputChange(value: string) {
    if (this.debounceTimer) {
      clearTimeout(this.debounceTimer);
    }
    this.debounceTimer = setTimeout(() => {
      this.searchText = value;
      this.debounceTimer = null;
    }, 300); // 300ms防抖时间
  }
}

在这个示例中，TextInput组件的onChange事件触发handleInputChange方法。该方法使用setTimeout来延迟更新searchText状态，从而实现防抖效果。如果在300ms内再次触发输入事件，之前的定时器会被清除并重新设置，确保只有在用户停止输入300ms后才会更新searchText。

更多关于HarmonyOS鸿蒙Next中ArkTS优雅的实现app内防抖的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

htzhanglong 2楼•7 天前

在HarmonyOS鸿蒙Next中，使用ArkTS实现App内防抖可以通过以下方式优雅地完成：

使用定时器：在事件触发时，设置一个定时器，延迟执行目标操作。如果在延迟期间再次触发事件，则重置定时器。
封装防抖函数：将防抖逻辑封装成一个可复用的函数，方便在多个地方调用。

function debounce(func: () => void, delay: number): () => void {
    let timer: number | null = null;
    return function () {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            func();
        }, delay);
    };
}

// 使用示例
const handleClick = debounce(() => {
    console.log('Click debounced');
}, 300);

Button('Click Me')
    .onClick(() => {
        handleClick();
    });

通过这种方式，可以在ArkTS中优雅地实现防抖功能，确保在频繁触发事件时，只执行最后一次操作。