(setTimeout에서 호출 된) 값을 반환하지 않습니다.

Question

웹 사이트 용 Chrome 확장 프로그램을 작성하여 JavaScript를 배우고 있습니다. 웹 사이트에는 4 개의 동영상 목록이 표시되는 섹션이 있으며 더 많은 동영상을로드 할 수있는 버튼이 있습니다. 이 버튼을 클릭하면 AJAX 호출을 통해 새로운 비디오 목록이로드됩니다.

나는 목록에서 다음 비디오의 URL을 가져 오는 getNextVideo() 함수를 가지고 있습니다. 예를 들어, 세 번째 동영상에있는 경우 네 번째 동영상의 URL을 가져옵니다. 네 번째 동영상을 보신 경우 getNextVideoList() 함수를 통해 클릭 (새로운 동영상 목록로드)을 시뮬레이션 한 다음 1 초 시간 초과 후 새로로드 된 목록의 첫 번째 항목을 가져 와서 DOM 업데이트를 기다립니다. (나는 돌연변이 관찰자를 사용하려고 시도했지만 그것은 나의 기술 수준에 너무 복잡했다).

function getNextVideo() 
{ 
    if (getVideoPosition() == 4) 
    { 

     function ad() 
     { 
      getVideo(1); 
     } 

     setTimeout(ad, 1000); 

     getNextVideoList(); 
    } 
    else 
    { 
     var index = getVideoPosition() + 1; 
     return getVideo(index); 
    } 
} 

getVideoPosition() 몇 가지 간단한 jQuery를 n 번째 자식 선택기를 사용하여 목록에서 비디오의 인덱스를 가져옵니다. 값 1, 2, 3 또는 4을 반환합니다.

getVideo(n)은 비디오 색인 (1, 2, 3 또는 4)을 가져와 해당 비디오의 URL을 반환합니다. 반환 된 값은 콘솔에서 다음과 같이 표시됩니다. "http://video.example.com/video-id"

내 문제는 대기열에서 네 번째 인 비디오에 getNextVideo()을 실행하면 내 콘솔에 undefined이 반환된다는 것입니다. getNextVideo() 함수를 AJAX 호출 및 후속 DOM 업데이트 후 목록의 첫 번째 비디오 URL을 반환하려면 어떻게해야합니까?

Answer 1

getNextVideo()는 반환 값 getVideoPosition() == 4하지 않기 때문입니다. 반환 값은 undefined으로 표시되지 않습니다.

코드를 보면 if (getVideoPosition() == 4) 블록 안에 반환 값이 없습니다. 함수에서 반환 된 값이없는 경우 반환 값은 undefined입니다. 리턴 값을 원한다면 return 문을 추가해야합니다. 참고로, setTimeout()에 의해 호출 된 함수는 getNextVideo()이 이미 반환 된 후에 실행되므로 반환 값 설정에 참여할 수 없습니다.

setTimeout()으로 비동기 프로그래밍을 실제로 사용하려는 경우 (처음에 왜 그렇게하는지 확신 할 수 없음) 비동기 프로그래밍 모델로 전환해야합니다. 즉, 사용하지 않을 것임을 의미합니다. getNextVideo()에서 반환 값을 반환하지만 다음 값으로 완료되면 콜백을 호출합니다. 이 콜백은 setTimeout()에서 비동기 적으로 실행될 수 있습니다. 그러나 나는 왜 당신이 심지어 setTimeout()을 사용하고 있는지 알지 못합니다. 그래서 여분의 합병증이 최선의 선택인지 아닌지는 모르겠습니다. 비동기 setTimeout()을 제거한 경우 해당 암에서 정상적으로 그냥 getNextVideo() 값을 반환 할 수 있습니다.

Answer 2

당신의 코드에 대한 나의 이해는 조건이 발생할 때 "getNextVideo"함수를 setTimeOut 콜백 함수로 옮기는 것입니다.
"getNextVideo"함수의 실제 임무는 "getVideo (index); return"입니다.

이와 같이 코드를 작성하면 가능합니다.

 if (getVideoPosition() == 4) 
{ 
    function ad() 
    { 
     getNextVideo(true); 
    } 
    setTimeout(ad, 1000); 
    getNextVideoList(); 
} 


function getNextVideo(isFirst) 
{ 
    var index = isFirst==true?1:getVideoPosition() + 1; 
    return getVideo(index); 
}