typescript 如何在Angular中消除方法的抖动

ztmd8pv5  于 2023-08-07  发布在  TypeScript
关注(0)|答案(3)|浏览(122)

我有一个方法调用foo(),他正在进行API调用,foo()方法正在调用滑块eventChange方法,滑块的步长为100,而maxNum为500k+,因此当有人滑动滑块时,它将调用eventChange方法超过1次。
现在,我想在进行API调用之前对方法foo()进行400ms的反跳,就像我们对FormControl值更改所做的那样。
我试过用lodash debounce

var debounce = _.debounce(function(){

  foo();

}, 30000);

debounce();

字符串
但它说foo()不是一个函数。如何使用原始TypeScript对方法foo()进行反跳。

**注意:**Foo()不能绑定到任何html。

wbgh16ku

wbgh16ku1#

您可以使用lodash-decorators轻松地将lodash操作应用于函数

@debounce(1000)
foo() { ... }

字符串
它对于所有基于类的Angular 组件或服务尤其有用。

r9f1avp5

r9f1avp52#

好吧,不知何故,我设法解决了这个问题,通过setTimeout和它的工作完美的我作为一个debouncer,

onSliderEventChanges(event:ChangeContext){ 

  if(this.timerid !== null){
    clearTimeout(this.timerid);
  }
  this.timerid  = setTimeout(() => 
  {
    this.foo(false);
    this.timerid = null;
  }, 400);

}

字符串
第一个if总是会清除最后一个运行的timeOut,所以滑动结束时,I将只有一个对foo()的调用,因为只有最后一个timeOut是活动的。
setTimeout总是返回一个timerId

dgjrabp2

dgjrabp23#

你可以使用rxjs,因为你正在使用angular,你已经有了那个库,所以你有一个去抖动函数可以在上面使用。

ngOnInit(): void {
    // you look for your html element in which you desire
    // to attach an eventListener 
    let myHtmlElement = document.querySelector("#my-element-id-name");
    // then we proceed to turn the event into an observable sequence
    // my event could be in your case the 'click' event, I believe
    const myEventVar$ = fromEvent(myHtmlElement , 'myEvent');
    myEventVar$.pipe(
      // debounceTime is the rxjs library to delay the firing 
      // of function foo by 300ms in this example
      debounceTime(300)
    ).subscribe( () => {
      this.foo();
    });
}

字符串

相关问题