HarmonyOS 鸿蒙Next 防抖，需求是想连续点击按钮只触发一次

HarmonyOS 鸿蒙Next 防抖，需求是想连续点击按钮只触发一次

防抖的方法怎样写，需求是想连续点击按钮只触发一次
 

3 回复

demo如下： // 防抖 在一段时间内函数被多次触发，防抖让函数在一段时间后最终只执行一次

export function debounce(func: (event: ClickEvent) => void, delay?: number) {
  let timer: number;
  return (event: ClickEvent) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func(event);
    }, delay ? delay : 1000);
  };
}

// 节流 在规定的时间内，只执行一次

export function throttle(func: (event: ClickEvent) => void, delay?: number) {
  let inThrottle: boolean;
  return (event: ClickEvent) => {
    if (!inThrottle) {
      func(event);
      inThrottle = true;
      setTimeout(() => inThrottle = false, delay ? delay : 1000);
    }
  };
}

使用：

import { debounce, throttle } from '../click/ClickMoreEvent'

@Entry
@Component
struct TestPage {
  build() {
    Column() {
      Button('防抖点击')
        .onClick(debounce((event) => {
          console.log('防抖拦截==' + event.displayX)
        }, 5000))
        .gesture(LongPressGesture().onActionEnd((event) => {
          console.log('长按拦截==' + JSON.stringify(event))
        }))
      Button('节流点击')
        .onClick(throttle((event) => {
          console.log('节流拦截==' + event.displayX)
        }, 5000))
    }.width('100%').height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next 防抖，需求是想连续点击按钮只触发一次的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


深色代码主题
复制
function debounce() {
  if (this.timeout) {
    clearTimeout(this.timeout);
  }
  this.timeout= setTimeout(() => {
    // 代码逻辑
  },600)
}

在HarmonyOS鸿蒙Next系统中，若要实现按钮防抖功能，即连续点击按钮只触发一次事件，可以通过以下方式实现：

  1. 状态标记法： 定义一个布尔变量用于标记按钮是否已被点击且在处理中。在按钮点击事件的处理函数中，首先检查该标记，若已被标记为处理中，则忽略此次点击；若未被标记，则执行相应操作并将标记置为处理中，操作完成后设置一个延时（如500毫秒），延时结束后重置标记为未处理状态。

  2. 计时器法： 使用计时器记录上一次点击事件的时间戳。在按钮点击事件中，获取当前时间戳并与上一次的时间戳比较，若时间差小于设定的防抖时间（如500毫秒），则忽略此次点击；若时间差大于防抖时间，则执行相应操作并更新上一次点击的时间戳。

示例代码（伪代码，需根据具体API实现）：

bool isButtonClicked = false;

void onButtonClick() {
    if (isButtonClicked) return;
    isButtonClicked = true;
    // 执行操作
    PostDelayedTask(500, []() {
        isButtonClicked = false;
    });
}

注意：上述方法中的PostDelayedTask为示例函数，实际使用时需根据鸿蒙系统提供的延时任务API进行替换。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部