스크롤 이벤트, 핸들러 등록

window.addEventListener('scroll', this.windowScroll)

스크롤 시 getReviews 실행

windowScroll(){ 
    windowScroll() {
      const scrollTop = this.$services.getScrollTop();
      const scrollThreshold = document.documentElement.scrollHeight - window.innerHeight - 300;
      if (scrollTop > scrollThreshold) {
        this.getReviews();
      }
    }

reviews를 가져오는 함수

    async getReviews() {
      this.count++;
      console.log('first', this.count);
      
     
      if (this.inProgress) {
        return;
      } else {
        this.inProgress = true;
      }
      const {
        result: {reviews}
      } = await this.$axios.$get('/find/review/list', {
        params:{
          condition: 'popular'
        }
      });
      
      console.log('second', this.reviews?.length)
      
      const limit = 9
      this.reviews = (this.reviews || []).concat(reviews || []);
      this.inProgress = false;
      if (reviews.length < limit) {
        //reviews.length가 limit보다 작다
        //activated하면 length < limit이니까 remove되어야 하는 거 아닌가
        window.removeEventListener('scroll', this.windowScroll());
      } 
    },

• getReviews가 실행되는 조건: scrollTop > scrollThreshold
  (다시 말해 html의 scroll을 한 전체 height에서 뷰포트의 높이와 300을 뺀 값보다 scroll한 만큼의 길이가 더 클 때)

🙋‍♀️ 질문
scroll을 해서 reviews들을 받아오고 그게 DOM에 element로 그려지기 전에 스크롤 이벤트가 연속으로 여러번 불린다
그러므로 windowScroll이 여러번 실행되어서 getReviews가 여러번 불린다. 하지만 위의 조건 충족 시 한번만 호출하고 싶으면 어떻게 해야 할까? (console.log찍어보면 아래와 같다 : first는 getReviews 호출, second는 요청 호출)

🙋‍♀️ 정답
data에 정의한 inProgress를 이용해서 한번 getReviews가 실행되었을 때 inProgress를 true로 만들어준다. api 요청이 끝난 다음에 inProgress를 false로 만들어줘서 한번 요청이 끝난 다음에만 다음에 요청을 부를 수 있도록 한다.(아직 응답을 받아오지 않은 생태에서 getReviews를 실행했으면 inProgress가 아직 true니까 return을 해서 요청까지 가지 않는다) (✅)