HarmonyOS 按钮怎么防止重复点击？

Question

如题：HarmonyOS 按钮怎么防止重复点击？

Answer 1

目前代码中防重复提交的方式有多种，参考如下：

1、全局变量标识（强烈推荐）

这种方式是在按钮触发的事件入口处加标识，标识现在业务正在提交。代码如下：

submit: function($Page, $Gadget, $Fire, $UI) {
  if ($Gadget.isSubmiting) {
    return;
  }

  $Gadget.isSubmiting = true;
  ... ...
  // 校验失败 or 业务提交成功
  $Gadget.isSubmiting = false;

这种方式是最保险、最精准的控制按钮重复提交的方式，也是最推荐的方式。

它利用了JavaScript执行单线程执行的特性（这里是以一个浏览器TAB页为单位。浏览器是多线程的，有GUI渲染线程、JS引擎线程、http请求线程等等，但是JavaScript是在JS引擎线程里面单线程执行的，这个是JS的特性）。

假设我们点击了两次提交按钮，由于JS单线程执行的特性，两次的submit函数执行顺序肯定是第一次先执行完成，再执行第二次，那么第二次及以后执行submit时，$Gadget.isSubmiting肯定是true，则不会调用服务进行提交动作。

2、可以定义一个节流函数throttle，设置间隔时间控制事件的触发。参考代码如下：

function throttle(func: Function, interval: number) {
  let lastTime = 0;
  return () => {
    const nowTime = Date.now();
    const remainTime = interval - (nowTime - lastTime);
    if (remainTime <= 0) {
      lastTime = nowTime;
      func();
    }
  };
}

@Entry
@Component
struct Index {
  @State num: number = 0

  build() {
    Row() {
      Column() {
        Text(this.num.toString())
        Button("click").onClick(throttle(() => {
          this.num++
        }, 5000))
      }
      .width('100%')
    }
    .height('100%')
  }
}