gPdus
92
2019-06-16 17:01:39
1
251

for문 질문이요ㅜㅠㅠㅠㅠ


일단 하고싶은 건

배열을 ajax에서 json으로 가져오는데 배열의 수가 2개일때도 있고 15개일 때도 있고 20개일 때도 있어서

다양한데

이배열을 테이블 td로 5개씩 나눠서 띄워줄건데

만약 5개씩 띄우는데 배열 값이 17개면 마지막 띄우는 화면에 빈td가 3개 떠야해요 5:5:5:2(나머지 빈td3개)이렇게요 다음 5개의 td로 넘어갈때 5초가 걸리구

일단 제가 짠 소스는

$(document).ready(function() {

    getArrInfoByRoute();

    setInterval("getArrInfoByRoute()", 5000);

});

5초마다 실행해야 해서 setInterval을 해줬어

var busInfo;

var arrCount = -1; //배열 비교할때 쓰기 위해 밖에서 지정

function getArrInfoByRoute() {

      $.ajax({

         type : "GET",

         url : "http://~",

         dataType : "json",

         success : function(data) {

            busInfo = data;

            var arrLength = busInfo.arrInfo.length;

            var html; 

            if((arrCount + 1) == arrLength) { arrCount = -1; }

            arrCount += 1;

            $(".showBusInfo").empty();


            for (var i = arrCount; i < (arrCount + 4); i++) {

                  if (busInfo.arrInfo[i] != null) {

                       html += "<tr style='height:20%'><td class='ct_line1'><div class='rNumBg'><p style='display: table-cell; vertical-align:middle'>" + rotNm + "</p></div></td>";

                       html += "<td class='ct_line2'>";

                       html += "</td><td class='ct_line3'><table style='width:100%; heigth:100%; border-spacing:0'><tr style='height:65%'>"

                               + tag + seat + "<td style='width:2%'></td></tr>";

                     html += "<tr style='height:35%'><td colspan='8' class='stLoc'>" + passBsNm + "&nbsp;</td></tr></table></td></tr>";

                     

                     arrCount = i

                     if ((arrCount + 1) % 5 == 0) {  break; }

                     } else {

                         html += "<tr style='height:20%'><td class='ct_line1'><div><p style='display:table-cell; vertical-align:middle'></p></div></td>";

                         html += "<td class='ct_line2'></td>";

                         html += "<td class='ct_line3'><table style='width:100%; heigth:100%; border-spacing:0'><tr style='height:65%'>"
                           + "<td style='width:100%;'><div  class='countbg' style=\"background-image: url('image/빈이미지.png'); height:12vh\"></div></td>"
                           + "<td style='width:100%;'><div  class='countbg'></div></td>"
                           + "<td style='width:100%;'><div  class='countbg'></div></td>"
                           + "<td style='width:100%;'><div  class='countbg'></div></td>"
                           + "<td style='width:100%;'><div  class='countbg'></div></td>"
                           + "<td style='width:100%;'><div  class='countbg'></div></td>"
                           + "<td style='width:100%;'><div  class='countbg' z-index:1; position:relative></div>"
                           + "<div style='position: absolute; top:initial; margin-left:1.5%; border:solid 2px red; background-color:#6db4e2; font-size: 1.9vw; z-index:20'></div></td><td style='width:2%'></td></tr>";
                         html += "<tr style='height:35%'><td colspan='8' class='stLoc'></td></tr></table></td></tr>";
                  }
              } //end for
         }
         $(".showBusInfo").append(html);
    });// end ajax
}// end getArrInfoByRoute()
이런식으로 짜서 17개일때는 마지막에 5:5:5:2(나머지 빈td3개)이거를 잘 실행시키는데
문제는 배열값이 1개면 5(중에 1개떠있고 4개 빈td):5(다 빈td):5(빈td):5(빈td) 이런식으로 떠야하는데
4(중에 하나는 값이 나옴):3(첫번째 뜬 값이 없어야 하는데 떠있음):2(계속 떠있음..):1  이런식으로 되더라구요ㅠㅠ
소스를 어떤식으로 수정해야 할까여ㅠㅠ 조언부탁드려
0
0
  • 답변 1

  • 보리건빵
    42
    2019-06-17 02:54:27

    코드를 자세히 보지는 않았지만 비동기 처리에 대한 문제로 생각됩니다

    for 문 안에 var로 선언되어 있어 setInterval로 인해 5초 후의 i값을 사용하게 됩니다

    let으로 바꾸시거나 IIFE 사용하시면 될것 같습니다

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.