HarmonyOS Search组件中函数防抖的实现方式

定义:debounce

debounce(fn: Function, wait: number = 300) {  
  let timeout: number = -1;  
  console.log("debounce");  
  console.log("this",JSON.stringify(this))  
  return () => {  
    if(timeout!=-1){  
      clearTimeout(timeout);  
    }  
    timeout = setTimeout(fn.bind(this), wait);  
    console.log("==timeout==",timeout);  
  }  
}  
setFinalInput() {  
  console.log("setFinalInput this", JSON.stringify(this));  
  this.finalSearchInput = this.searchInput;  
}

调用:

this.debounce(this.setFinalInput, 300)

调用debounce函数后无法执行this.setFinalInput函数。

HarmonyOS

superinsect

2024-10-28 10:36:28

浏览

回答 1

待解决

回答 1

按赞同

按时间

zbw_apple

调用this.debounce(this.setFinalInput, 300)没有执行return的函数是因为return的函数本身没有被调用导致，可以通过this.debounce(this.setFinalInput, 300)()调用到，但是这样会不停调用debounce函数无限创建闭包每一个闭包分别引用一个timeout，不能清除原定时器，最终每一次点击都会生效无法达到防抖的效果，建议可以全局设一个变量以达到防抖的目的：

@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("==timeout==",this.timeout);  
  }  
  
  setFinalInput() {  
    console.log("setFinalInput this", JSON.stringify(this));  
    // this.finalSearchInput = this.searchInput;  
  }  
}

如果需要将防抖函数封装，可以试下以下方式：

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

2024-10-28 16:26:00

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Search组件中函数防抖的实现方式

订阅鸿蒙技术特刊，精选内容抢先看