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

发布于 1周前 作者 itying888 来自 鸿蒙OS

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

回到顶部