ArkTS自定义组件——简单实现一个带有防抖功能的按钮

探索基于ArkTS的自带UI组件的基础上的自定义组件的实现方式

防抖（debounce）是一个非常实用的用户交互优化点，组件具备防抖功能后，可以优化应用在高频点击下的响应能力（如果一个按钮组件的点击将会触发某个网络请求或是页面跳转，高频点击将会造成许多不必要的网络或是渲染负载）

下面是参考ArkTS的语法规则，利用自定义组件的能力，简要实现了一个带有防抖功能的按钮

// DebounceButtom.ets  
@Entry  
@Component  
struct DebounceButtom {  
  @State isClicked : boolean = false;  
  @State counter : number = 0;  
  public  timeout : number = 0;  
  public   wait : number = 300;  
  build() {  
    Column(){  
      Text(String(this.counter))  
      Text(String(this.isClicked))  
      Button("click and then counter++").onClick(() => {  
        this.isClicked =true  
        if(this.isClicked) {  
          clearTimeout(this.timeout)  
        }  
        this.timeout = setTimeout(() => {  
          this.counter += 1  
          this.isClicked = false  
        },this.wait)  
  
      })  
    }  
  
  }  
}

但是我认为这种实现方式存在很多问题，首先是，实现得不规范；其次是可能存在的性能问题

是否能够抽象出来一个debounce函数，在组件内调用这个函数就能实现防抖功能。

对于前端框架React，这可以利用自定义Hooks实现

但是对于ArkTS，还不是特别清楚是否有方法实现。

--------update---------

好消息：已经找到能够实现此功能的开源三方库，且此开源三方库质量很高。
项目地址如下：
项目地址
ohpm地址