Javascript JQuery에서 아약스 콘텐츠를로드 한 후 루핑 및 일시 중지

Question

나는 간단한 문제를 해결할 수 있었지만 (결코 존재하지 않는다!) URL 목록을 통해 루프를 만들려고합니다. 자바 스크립트 배열에서로드했습니다. 첫 번째, X 초 기다린 다음 초를로드하고 다시 시작할 때까지 계속하십시오. 배열을 가지고 루핑 작업을하는 데 문제가 있습니다. 그러나 setInterval 또는 유사 함수를 사용하여 "대기"를 구현하려고합니다. 루프가 백그라운드에서 계속되므로 구조적인 문제가 있습니다.

나는 setTimeOut 및 setInterval에 대해 알고 있지만 작동하는 방식으로 코드의 서식을 지정할 수는 없습니다. 나는 javascript에 익숙하지 않고 여러 가지 어리석은 실수를 저지르기 때문에 실제로 이것을 구조화하는 방법과 작동 예제를 이해할 수있게되어서 정말 고맙겠습니다!

나는 이런 식으로 코딩을 시도 : 당신은 당신의 카운터 한계에 도달하면 탈옥 수동으로 setTimeout() 또는 setInterval() 대신 while 루프의 사용, 그리고해야

$(document).ready(function(){ 

// my array of URL's 
var urlArray = new Array(); 
urlArray[0] = "urlOne"; 
urlArray[1] = "urlTwo"; 
urlArray[2] = "urlThree"; 

// my looping logic that continues to execute (problem starts here) 

while (true) { 

    for (var i = 0; i < urlArray.length; i++) { 

    $('#load').load(urlArray[i], function(){ 

    // now ideally I want it to wait here for X seconds after loading that URL and then start the loop again, but javascript doesn't seem to work this way, and I'm not sure how to structure it to get the same effect 

     }); 

    } 

} 

}); 

Answer 1

나는 소스 배열 요소의 현재 인덱스 인덱스가 배열 범위 내에 있는지 확인하기 위해 검사를로드하고 내가 불필요한 작업을 예약 아니에요하기를 전달하는 재귀 솔루션을 사용합니다.

function loadUrls(source, index) 
{ 
    if (index < source.length) { // make sure this one is available 
     $('#load').load(source[index], function() { 
      var newIndex = index + 1; 
      if (newIndex < source.length) { // don't schedule if this is last 
       setTimeout(function() { loadUrls(source, newIndex); }, 5000); 
      } 
     }); 
    } 
} 

$(document).ready(function(){ 

    // my array of URL's 
    var urlArray = new Array(); 
    urlArray[0] = "urlOne"; 
    urlArray[1] = "urlTwo"; 
    urlArray[2] = "urlThree"; 

    loadUrls(urlArray, 0); 
} 

당신이 무한히 같이 Recurse 같은 URL을 통해에 loadUrls을 변경하려면 :

function loadUrls(source, index) 
{ 
    if (index < source.length) { // make sure this one is available 
     $('#load').load(source[index], function() { 
      var newIndex = (index + 1) % source.length; 
      setTimeout(function() { loadUrls(source, newIndex); }, 5000); 
     }); 
    } 
} 

Answer 2

.

var count = 0; 

    // Function called by setInterval 
function loadIt() { 
    $('#load').load(urlArray[count], function(){ 
      // Do your thing 
     }); 

     count++; // Increment count 

     if(count == urlArray.length) { 
      count = 0; 
     } 
} 

loadIt(); // Call the function right away to get it going 

var interval = setInterval(loadIt, 5000); // then call it every five seconds 

편집 :

편집은 load() 콜백에서 카운터 유지 보수를 가져올 수 있습니다.

편집 : 이렇게 될 것 count마다 설정

귀엽 방법 :

count = (count == urlArray.length) ? 0 : count + 1; 

Answer 3

것은 이런 일을보십시오.

var totalUrls = urlArray.length; 
var currentPosition = 0; 

function keepLoadingForever() { 
    if (currentPosition >= totalUrls) currentPosition = 0; 

    $('#load').load(urlArray[currentPosition], function(){ 
     setTimeout(keepLoadingForever, 5000);   //delay 5 seconds 
     }); 
    } 

    currentPosition++; 
}