HarmonyOS NEXT在交互中实现防抖和截流的方法？

Question

HarmonyOS NEXT在交互中实现防抖和截流的方法
本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

实现防抖可参考以下代码：

@Entry
@Component
struct SearchDemo{
    @State timeout: number = -1;
    build() {
        Column(){
            Text('点击')
           .fontSize('25fp')
           .fontColor(Color.White)
           .fontWeight(FontWeight.Bold)
           .borderRadius(15)
           .padding(8)
           .backgroundColor(Color.Blue)
           .onClick(() => {
                this.debounce(this.setFinalInput, 3000);
            })
        }
    }
    debounce(fn: Function, wait: number = 300) {
        if(this.timeout!== -1){
            clearTimeout(this.timeout);
        }
        this.timeout = setTimeout(fn.bind(this), wait);
        console.log("zd--- ==timeout==",this.timeout);
    }
    setFinalInput() {
        console.log("zd--- setFinalInput this", JSON.stringify(this));
        // this.finalSearchInput = this.searchInput;
    }
}

实现截流可参考以下代码：

@Entry
@Component
struct ListPage {
    @State pageNumber:number = 1
    @State running:boolean = false
    @State list:number[] = []
    aboutToAppear(): void {
        for (
    }
}

Answer 2

实现截流可参考demo：

@Entry
@Component
struct ListPage {
  @State pageNumber:number = 1
  @State running:boolean = false
  @State list:number[] = []

  aboutToAppear(): void {
    for (let i = 1; i <= 8; i++) {
      this.list.push(i);
    }
  }
  getData(){
    let number = this.list.length + 1
    for (let i = number; i <= 8*this.pageNumber; i++) {
      this.list.push(i);
    }
    this.running = false
    console.log(this.list.length.toString())
  }

  @Builder
  ListItemBuilder(item:number){
    Row(){
      Text(item.toString())
    }
    .width('100%')
    .padding(50)
    .backgroundColor(Color.Pink)
  }
  build() {
    Column() {
      List({space:10}){
        ForEach(this.list,(item:number)=>{
          this.ListItemBuilder(item)
        },(item:number)=>JSON.stringify(item))
      }
      .padding(20)
      .edgeEffect(EdgeEffect.Spring)
      .onReachEnd(()=>{
        if (!this.running) {
          this.running = true
          this.pageNumber++
          setTimeout(() => {
            this.getData()
          }, 2000)
        }
      })
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
  }
}