변수가 각 루프에서 업데이트되지 않음 - JQuery

Question

$(".room").each(function() { 
    i = i + 1; 
    alert(i); 
    roomid = $(this).attr("id"); 
    alert(roomid); 

    $.get("QueryRoom.aspx?ID=" + roomid, function (data) { 
     $("#" + roomid).html(data); 
    }); 
}); 

}); 

get 쿼리 중간에 roomid가 업데이트되지 않고 # 22 (마지막 방 ID)에서 멈춘 것 같습니다. div 요청 콘텐츠 변경 내용을 볼 수 있기 때문에 get 요청은 정상적으로 수행됩니다.

아무도 도와 줄 수 있습니까?

Answer 1

비동기 호출이 완료 될 때까지 roomid의 값을 유지하는 클로저가 필요합니다. 클로저를 만드는 한 가지 방법은 roomid 값을 매개 변수로 전달하는 즉시 함수를 사용하는 것입니다.

클로저에 대해 자세히 설명하고 있지만 간단하게 설명하는 10 억 개의 기사가 있습니다. 클로저는 외부 범위의 변수에 액세스하는 모든 함수입니다. 특수한 객체 호출은 내부 함수 내에서 참조되는 모든 객체/변수의 메모리 위치를 보존하기 위해이 상황에서 클로저가 만들어지면서 호출됩니다.

예를 들어,이 클로저를 작성한 후에는 똑같은 이름의 변수가있는 즉각적인 함수가 있기 때문에 바깥 쪽 범위에 실제로 roomid을 숨기고 있습니다. 그러므로 즉각적인 함수 내에서만 값에 액세스하게되고 ajax 호출이 완료되면 올바른 ID를 갖게됩니다.

$(".room").each(function() { 
     i = i + 1; 
     alert(i); 
     roomid = $(this).attr("id"); 
     alert(roomid); 
     (function(roomid) { 
      $.get("QueryRoom.aspx?ID=" + roomid, function (data) { 
       $("#" + roomid).html(data); 
      }); 
     })(roomid); 
    }); 
}); 

Answer 2

roomid는 $.get으로 콜백 함수 모두 사이에서 공유된다. 루프는 콜백이 완료되기 전에 충분히 빠르게 증가하여 모두 최대 값을 얻습니다. 당신이있어 이후,

(function (roomid) { 
    $.get("QueryRoom.aspx?ID=" + roomid, function (data) { 
     $("#" + roomid).html(data); 
    }); 
}(roomid)) 

---

사실 : 당신은 다양한 방법으로이 문제를 해결 할 수 있지만, 가장 간단한 아약스 호출이되는 폐쇄에 현재 값 roomid에 전달하는 것입니다 var을 사용하지 않고 roomid은 전역입니다. 이것은 아마도 바람직하지 않습니다. 대신 당신이해야이 공유되지 않습니다 .each 기능의 각 반복에 대한 새로운 roomid을 만듭니다

var roomid = $(this).attr("id"); 

-이 폐쇄가 필요합니다.