ajax 과제 중 버그발견

[최준혁]

let count =1;
var products = [
  { id: 0, price: 70000, title: 'Blossom Dress' },
  { id: 1, price: 50000, title: 'Springfield Shirt' },
  { id: 2, price: 60000, title: 'Black Monastery' },
];

cardGeneretor(products);

$('#moreView').on('click', function(){
  
  $.get(`https://codingapple1.github.io/js/more${count}.json`, function(data){
    cardGeneretor(data);
    count++;
  });

  // count++;

  if(count>2){
    $('#moreView').addClass('displayNone');
  }

});

function cardGeneretor(data){
  for(let i=0; i<data.length; i++){
    $('.row').append(`
      <div class="col-sm-4">
        <img src="https://via.placeholder.com/600" class="w-100">
        <h5>${data[i].title}</h5>
        <p>가격 : ${data[i].price}</p>
      </div>
    `);
  }
}

count가 3인데도 버튼이 안사라지고 한번 더 누르면 그제서야 사라집니다. (count가 4가 되진 않고 3으로 유지)
혹시나 해서 count++ 을 ajax콜백에서 밖으로 (온클릭 콜백으로) 뺏더니 정상적으로 2번만에 사라집니다
왜 이런거죠

 

[codingapple]

if를 ajax 콜백함수 안으로 옮깁시다 ajax처럼 다른 코드보다 늦게처리되는 코드 만나면 ajax 다음줄을 먼저 실행해줍니다

[글쓴이]

글