HarmonyOS 按钮怎么防止重复点击

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

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

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%')
  }
}
分享
微博
QQ
微信
回复
1天前
相关问题
HarmonyOS重复点击问题
32浏览 • 1回复 待解决
HarmonyOS 点击图片按钮中间没反应
718浏览 • 1回复 待解决
如何实现按钮点击效果?
478浏览 • 2回复 待解决
点击拒接按钮后无法再次来电
2043浏览 • 1回复 待解决