변수 값이 올바르게 설정되지 않았습니다.

Question

getJSON 함수 내에서 변수 값이 올바르게 설정되지 않았습니다. 변수 $ videoId는 첫 번째 경고에서 예상대로 396과 397을 표시합니다.

두 번째 경고에서 값 397은 두 번 표시됩니다.

여기에 누락 된 자료가 있습니까? 이런 종류의 문제를 논의하는 다른 게시물을 여기에서 찾을 수 없습니다. 그렇다면 저를 저를 지적하십시오.

아래는 jQuery 코드입니다. getJSON 방법은 비동기하고 있기 때문에 그것은 당신이 자바 스크립트 다루고있다

: 댓글로 지적

<div class="ow_video_list_item ow_small"> 
    <a href="http://site.com/video/396">Video 1</a> 
</div> 

<div class="ow_video_list_item ow_small"> 
    <a href="http://site.com/video/397">Video 2</a> 
</div> 

Answer 1

getJson의 비동기 특성에 대한 다른 의견은 맞습니다. 하지만 문제는 대부분 전역 변수 $ videoId를 사용한다는 것입니다. 당신은 교체하는 경우 :

$videoId = $(this).children("a").attr("href").split("/")[5]; 

var $videoId = $(this).children("a").attr("href").split("/")[5]; 

에 의해 당신은 비동기 방식을 사용하는 경우에도, 잘 될 것입니다.

Answer 2

이 $videoLink 가정하면 사실 $videoId에 : 아래

$("div .ow_video_list_item").each(function(){   
    $videoId = $(this).children("a").attr("href").split("/")[5]; 
    alert($videoId); ==> First Alert 

    $.getJSON("video/get-embed/" + $videoId + "/", function (data) 
    {       
     $.each(data, function (key, code) {         
      alert($videoId); ==> Second Alert 
     });  
    }); 

    }); 

는 HTML 코드 폐쇄. 당신이 getJSON 콜백을 실행하면 : 첫 번째 각 루프와 $ videoId로에 루프 한

function (data) 
    {       
     $.each(data, function (key, code) {         
      alert($videoId); ==> Second Alert 
     }); 

그러므로 마지막 값 397 두 배의 디스플레이를 촬영했다. 당신이 getJson 방법을 수행 할 때 How do JavaScript closures work?

Answer 3

, 당신은 비동기 코드를 사용

자바 스크립트 폐쇄가 여기에 작동하는 방법에서보세요. 이 경우 $videoID에 마지막으로 지정한 값은 397이므로 두 콜백 모두 경고 값입니다. 이 문제를 해결할 수있는 몇 가지 방법이 있습니다. 예를 들어 getJson 작업에서 가져온 "데이터"에 videoID 값을 반환하고 alert(data.videoID)을 사용할 수 있습니다. 또는 간단한 정수 변수 대신 적절한 키를 사용하여 값의 배열을 가질 수 있습니다. 예를 들어, 색인이 될 수 있습니다 ( i : $().each(function(i,e) {})). 그렇게 작동하게하는 방법을 찾아야합니다. 나는 data.id이 그것을하는 가장 쉬운 방법이라고 생각합니까! 희망이 도움이됩니다.

Answer 4

몇 가지.

• 코드에는 $ videoId가 정의되어 있지 않습니다. $ videoLink는 실제로 $ videoId라고 가정합니다. 나중에 참조 할 수 있도록 데이터 포인트

<a href="http://site.com/video/396" data-video-id="396">Video 1</a>

당신이 $(element).data('videoId') 쉽게 그 동영상 ID에 액세스 할 수 있습니다 그 방법을 액세스하기 위해이 같은 일을하는 것이 더 쉬울 수 있습니다합니다. 클래스 사용과 같은 다른 전략이 있습니다.$ videoLink이 코드 샘플에서 $ videoId가 다음 $ videoId가 그 함수의 범위 이외의 어딘가에 정의되어 있어야하지 않은 경우

• . JS의 스코프/클로저에 대한 많은 리소스가 있습니다. JS dev work의 적당한 양을한다면 Javascript: The good parts을 제안 할 것입니다.

• $ videoLink가 실제로 코드 샘플에서 $ videoId라고 가정합니다. 당신은 그 안에 값을 할당하고 있습니다. 각 루프하지만 그 변수 자체는 그 함수 안에서 "닫혀 있지"않습니다. 그것은 전역이거나, 각 루프의 범위를 벗어나는 다른 곳에서 정의됩니다. var을 $videoLink = 문 앞에 던져서 var에 포함 시키십시오.

• 또 다른 잠재적 인 문제는 서버에 대한 비동기 호출을 호출하는 것이지만 해당 비동기 호출 범위를 벗어나는 변수에 따라 다릅니다. 대부분의 경우이 호출은 밀리 초가되지만 진행 상황을 이해하는 좋은 방법은 정신적으로 코드를 단계별로 실행하고 각 서버 호출에 1 분이 걸리는 것처럼하는 것입니다. 위 예제에서 외부 루프는 한 번 실행되고 396의 ID를 얻은 다음 AJAX 요청을 실행 한 다음 다시 반복하고 ID 397에 대해 동일한 작업을 수행합니다. 서버가 두 번째 아약스 요청에 걸린 시간에 응답하지 않았습니다 발사하기. 이제 2 명의 아약스 요청을 기다리고 있습니다. 1 분 후에 다시 돌아와서 아, $ variableLink 변수는 ajax 콜백 함수 외부에서 정의 되었기 때문에 397이라는 값을 갖습니다. 이것에 대한 해결책? 몇 가지가 있습니다. 필요한 것을 서버에서 가져온 일부 데이터를 사용하거나 서버에서 액세스중인 잠재적 인 비디오의 배열/해시를 유지할 수 있습니다.

그 밖의 다른 방법이 있지만 그 변수를 추적하는 것 이상의 정확한 사용 사례를 모른 채 말하기는 어렵습니다. 그러나 이것은 당신에게 좋은 출발점을 제공해야합니다.