Блог

У меня есть кнопка like, похожая на ту, что есть в Twitter, которая вызывает функцию, которая обрабатывает запросы, и в функции обратного вызова, которая увеличивает количество лайков и изменяет значение liked bool на true, а кнопка меняется на unliked button, проблема в том, что если я быстро нажал кнопку like, количество лайков уменьшилось.количество лайков увеличивается и уменьшается больше, чем у одного разрешенного пользователя

Я попытался установить задержку на 1 секунду внутри функции обратного вызова и вне ее, но это не дало наилучшего эффекта

 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--;
      }
    });
  }
  

Я хочу нажимать так быстро, как хочу, и функция обратного вызова вызывается только после завершения запроса

это http-запрос, который я использую в like:

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

Я думаю, вы можете использовать логическое значение, чтобы проверить, выполняете ли вы все еще последний запрос. например, вы можете использовать следующий алгоритм.

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