HarmonyOS 鸿蒙Next ArkUI 点击节流以及防抖实现

// 防抖 在一段时间内函数被多次触发，防抖让函数在一段时间后最终只执行一次
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%’)
  }
}

就可以实现节流跟防抖了