Anzeigen verschiedener Bilder innerhalb von 0,08 Sekunden Timeout

Ich habe diesen Code, der 24 Bilder in einem Intervall von 0,08333 Sekunden anzeigen soll. Es zeigt jedoch nur das letzte Bild. HTML:Anzeigen verschiedener Bilder innerhalb von 0,08 Sekunden Timeout

<!DOCTYPE html><html><head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><script type="text/javascript" src="script.js"></script><title>page</title></head><body> 
<img src="untitled.0001.jpg"> 
</body></html>

In javascript:

$(document).ready(function() { 
$(document).keydown(function(e) { 
    switch(e.which) { 
     case 39: // right 
      for (var i = 1; i != 24; i++) { 
       setTimeout(function(){ 
         $("img").replaceWith("<img src='image.000"+ i +".jpg'>"); 
       },83); 
      } 
      break; 
     default: return; // exit this handler for other keys 
    } 
    e.preventDefault(); // prevent the default action (scroll/move caret) 
}); 
});

Wie kann ich es machen alle Bilder in einem Timeout von 0,08333 Sekunden

Update: Ich habe versucht, es zu lösen und kam mit dieser:

$(document).ready(function() { 
$(document).keydown(function(e) { 
    switch(e.which) { 
     case 39: // right 
     var count = 1; 
      while (count!=24) { 
       var waiting = 83 * count; 
       setTimeout(function() {$("img").replaceWith("<img src='avatar/walk/HumanWalk.000"+ count +".jpg'>");}, waiting); 
       count+=1; 
      } 
      break; 
     default: return; // exit this handler for other keys 
    } 
    e.preventDefault(); // prevent the default action (scroll/move caret) 
}); 
});

Warum funktioniert es immer noch und zeigt nur das letzte Bild?

Quelle

2016-07-10 David Moore

Mögliche Duplikat [JavaScript-Verschluss Innenschleifen - einfaches praktisches Beispiel] (http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-beispiel) – JJJ

Passen Sie auch auf, dass das Laden des Bildes einige Zeit in Anspruch nimmt. Möglicherweise möchten Sie Bilder vor dem Anzeigen vorab laden. –

Sie müssen sich bewusst sein, dass Ihre for-Schleife innerhalb von ein paar Millisekunden endet. Das bedeutet, dass alle setTimeout-Funktionen innerhalb dieses winzigen Intervalls zwischen dem Start und dem Ende Ihrer for-Schleife ausgelöst werden. Sie sind nicht sequenziell. – 1sloc

Versuchen Sie diesen Code

$(document).ready(function() { 

    $(document).keydown(function(e) { 
     switch (e.which) { 
      case 39: // right 
       for (var i = 1; i != 24; i++) { 
        (function(x) { 
         setTimeout(function() { 
          $("img").replaceWith("<img src='image.000" + x + ".jpg'>"); 
         }, i*83); 
        })(i); 
       } 
       break; 
      default: 
       return; // exit this handler for other keys 
     } 
     e.preventDefault(); // prevent the default action (scroll/move caret) 
    }); 
});

Quelle

2016-07-10 12:06:33 Roysh

Sie müssen das Argument 'i' hinzufügen. Und fixe Intervalle zu sein '83 * i' –

Es zeigt immer noch das letzte Bild nur .. –

Ich habe den Code geändert. Versuchen Sie es jetzt – Roysh

Verwenden setInterval für einen solchen Fall:

$(document).keydown(function(e) { 
    switch (e.which) { 
    case 39: 
     var c = 0; 
     var interval = setInterval(function() { 
     // set the source of your image to 
     // 'image.000' + (c++ -1) + '.jpg' 
     }, 83); 
     if (c === 24) clearInterval(interval); 
    } 
});

Quelle

2016-07-10 12:17:45 1sloc

Anzeigen verschiedener Bilder innerhalb von 0,08 Sekunden Timeout

Antwort

Verwandte Themen