在请求完成之前调用回调函数

Question

I have a like button similar to the one in twitter, which calls a function which deals with the requests and in the call back function which increases the number of likes and change liked bool to true and the button changed to unliked button, the problem is if I clicked fast in the like button the number of likes increases and decreases more than the one user which is allowed

I have tried to put delay 1 second inside the call back function and outside it but it didn't have the best effect

likeDecision(kweek: Kweek): void {
    // not in my profile
    if (this.callCommonFunc) {
      this.kweekFunc.like(kweek);
      return;
    }
    // in my profile
    this.kweekService.likeKweek(kweek.id).subscribe(() => {
      this.likeCallBack(kweek);
    });
  }

  likeCallBack(kweek: Kweek): void {
    this.kweeks.forEach(loopKweek => {
      if (loopKweek.id === kweek.id) {
        loopKweek.liked_by_user = true;
        loopKweek.number_of_likes++;
      }
    });
  }

  unlikeDecision(kweek: Kweek): void {
    // not in my profile
    if (this.callCommonFunc) {
      this.kweekFunc.unlike(kweek);
      return;
    }
    // in my profile
    this.kweekService.unlikeKweek(kweek.id).subscribe(() => {
      this.unlikeCallBack(kweek);
    });
  }

  unlikeCallBack(kweek: Kweek): void {
    this.kweeks.forEach(loopKweek => {
      if (loopKweek.id === kweek.id) {
        loopKweek.liked_by_user = false;
        loopKweek.number_of_likes--;
      }
    });
  }

I want to click as fast as I want and the callback function just called when the request finished

this is the http request which I use in like:

likeKweek(id: string): Observable<any> {
return this.http.post<any>(`${this.base}kweeks/like`, { id: id }).pipe(
  map(res => res),
  catchError(this.handleError)
);
}

Answer 1

I think you can use a Boolean to check if you are still executing the last request. for example you can use the next algo.

like ( ) {
     if(!busy) {
        busy = true;
        requestfunc => {
            set likes; 
            busy = false;
        }
    }
}