Looping et pause après le chargement du contenu ajax en Javascript JQuery

Question

J'ai ce que je pensais être un problème simple à résoudre (ne l'est jamais!) J'essaie de faire défiler une liste d'URL dans un tableau javascript que j'ai fait, charger le le premier, attendez X secondes, puis chargez le second et continuez jusqu'à ce que je recommence. J'ai le tableau et le fonctionnement en boucle, le problème est, cependant j'essaie et implémente un "wait" en utilisant setInterval ou similaire, j'ai un problème structurel, car la boucle continue en arrière-plan.

Je connais setTimeOut et setInterval, mais je n'ai pas pu formater le code d'une manière qui fonctionne. Je suis novice en javascript et, en tant que tel, je fais souvent des erreurs stupides, et j'apprécierais vraiment de comprendre comment structurer le tout, ainsi que quelques exemples pratiques!

J'ai essayé de coder comme ceci:

$(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

Je voudrais utiliser une solution récursive qui passe le tableau source et l'indice courant de l'élément à charger, vérifier pour vous assurer que l'indice se trouve dans les limites du tableau et que je ne suis pas la programmation du travail inutile.

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); 
} 

Si vous voulez infiniment récursion sur les mêmes urls, changer 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

Vous devez utiliser setTimeout() ou setInterval() au lieu d'une boucle while et casser manuellement lorsque votre limite de comptage est atteinte.

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 

EDIT:

Edité pour faire contre la maintenance sur le rappel load().

EDIT:

Une plus jolie façon de régler la count chaque fois que ce serait comme ça:

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

Answer 3

Essayez quelque chose comme ça.

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++; 
}