2023-06-18 TIL

[js] 변수 더하기 빼기가 제대로 되지 않는 issue

🚫 문제 발생

let page = 0;

window.onload = function () {
  getRanking();
};

async function getRanking(link, e) {
  if (!link) {
    if (e == "p") {
      page -= 10;
    } else if (e == "n") {
      page += 10;
    }
    
...

  if (!rankingData["previous"]) {
    leftArrow.style.display = "none";
  } else {
    leftArrow.style.display = "block";
    leftArrow.addEventListener("click", function () {
      let link = rankingData["previous"];
      getRanking(link, "p");
    });
  }
  if (!rankingData["next"]) {
    rightArrow.style.display = "none";
  } else {
    rightArrow.style.display = "block";
    rightArrow.addEventListener("click", function () {
      let link = rankingData["next"];
      getRanking(link, "n");
    });
  }
...

이런식으로 page 이동에 따라 변수에 값을 더하고 빼주는 함수를 만들려고 한다.

근데 함수 나머지는 다 잘 작동이 되는데
숫자 더하기 빼기만 안된다...

뭐가문제지?

🔎 문제점 탐구

이런식으로 콘솔창에는 n이랑 p가 잘 찍혀나오고 있다.
그럼 if (e == "p") 부분이 문제같은데...

아!! 문제점을 찾았다

async function getRanking(link, e) {
  console.log(e);
  if (!link) {
    rankingData = await getRankingApi();
  } else {
    if (e === "p") {
      page -= 10;
    } else if (e === "n") {
      page += 10;
    }
    rankingData = await getRankingApi(link);
  }

!link는 링크가 없을 때(가장 처음 페이지가 로딩됐을 때)인데
바보같이... 그쪽에다 넣어줬다
밑에 넣어줘야 한다!!

그러나..

🚫 새로운 문제 발생

같은 페이지를 왔다갔다하는데
자꾸 숫자가 여러번 더해지는 현상 발생...

🔎 문제점 탐구

문제는 이전 EventListener가 중첩되어서 나오기 때문.

그러니까, 새로운 요청을 하기 전에 이전 EventListener를 삭제해줘야하는데...

여러가지 시도해봤는데 잘 안됐다.

✅ 방법 도출

그냥 EventListener이 아니라 onclick 방식으로 바꿔줬다.
그러니까 더하기 빼기도 잘 되고 호출도 한번만 됨.

let page = 0;

window.onload = function () {
  getRanking();
};

async function getRanking(link, e) {
  if (!link) {
    rankingData = await getRankingApi();
  } else {
    if (e === "p") {
      page -= 10;
    } else if (e === "n") {
      page += 10;
    }
    rankingData = await getRankingApi(link);
  }

  if (!rankingData["previous"]) {
    leftArrow.style.display = "none";
  } else {
    leftArrow.style.display = "block";
    leftArrow.onclick = function () {
      let link = rankingData["previous"];
      getRanking(link, "p");
    };
  }
  if (!rankingData["next"]) {
    rightArrow.style.display = "none";
  } else {
    rightArrow.style.display = "block";
    rightArrow.onclick = function () {
      let link = rankingData["next"];
      getRanking(link, "n");
    };
  }

아래는 수정 된 코드!