Wie verwende ich die setTimeout-Methode, um das Karussell nach einer bestimmten Zeit zu verschieben? Javascript

Question

Ich habe ein div mit 3 Bildern nebeneinander. Zunächst wird 1 Bild angezeigt, während die anderen 2 mit Überlauf ausgeblendet werden: versteckt auf einem Eltern-Div. Dann benutze ich die setInterval-Methode, um das div mit den Bildern 1px jede Millisekunde nach links zu verschieben, bis das div sich 150px nach links bewegt hat. Zu diesem Zeitpunkt ist das erste Bild aufgrund eines Überlaufs nicht mehr sichtbar: ausgeblendet und das zweite Bild ist jetzt sichtbar. An dieser Stelle pausiert es wie vorgesehen mit der Methode setTimeout für eine Sekunde. Aber dann beginnen die Dinge falsch zu laufen. Nach Ablauf der 1 Sek. Wird das dritte Bild entweder schneller und stoppt dort, wo es sollte .... oder es beschleunigt sich und geht über den Haltepunkt hinaus und außer Sichtweite. Je mehr du auf den Knopf klickst, desto mehr verschwinden die Bilder! Ich denke nicht, dass ich setTimeout richtig verwende. Wenn ich es im Debugger anschaue ... läuft die Funktion, die setTimeout aufruft (pause()) in zufälligen Intervallen immer wieder durch, bevor sie den Rest des Skripts durchläuft. Dann kommt wieder zufällig eine Schleife zurück. Es sollte nur einmal ausgeführt werden ... 1 Sekunde nachdem setTimeout es aufruft, dann nie wieder.

function move() { 
 
    var element = document.getElementById('mover'); 
 
    var pos = -300; 
 
    var go = setInterval(animate, 1); 
 
    
 
    function animate() { 
 
     if (pos === 0) { 
 
      clearInterval(go); 
 
     } else if (pos === -150) { 
 
      function pause() { 
 
       pos++; 
 
      } 
 
      setTimeout(pause, 1000); 
 
      
 
     } else { 
 
      pos++; 
 
      element.style.left = pos + 'px'; 
 
     } 
 
    } 
 
}

* { 
 
    box-sizing: border-box; 
 
} 
 

 
img { 
 
    width: 150px; 
 
    height: 225px; 
 
} 
 

 
#overflow { 
 
    overflow: hidden; 
 
    width: 150px; 
 
    height: 225px; 
 
} 
 

 
#mover { 
 
    position: relative; 
 
    left: -300px; 
 
    width: 450px; 
 
    font-size: 0; 
 
}

<div id="overflow"> 
 
      <div id="mover"> 
 
       <img src="http://images.primewire.ag/thumbs/2763151_Mr_Robot_2015_30.jpg"> 
 
       <img src="http://images.primewire.ag/thumbs/2777450_Outcast_2016.jpg"> 
 
       <img src="http://images.primewire.ag/thumbs/2770130_Ash_vs_Evil_Dead_1969.jpg"> 
 
      </div> 
 
     </div> 
 
     
 
     <br> 
 
     <button onclick="move()">Click me</button>

Leider im ein Anfänger und ich weiß, es muss Dinge i betrachtet haben. Könnte mir bitte jemand sagen, was ich falsch mache?

Answer 1

Dies könnte nicht genau das, was Sie suchen, aber hoffentlich ist es etwas Nützliches hier:

https://jsfiddle.net/tobyl/g01zd64o/17/

jQuery:

var move = function() { 
    var element = document.getElementById('mover'); 
    var pos = element.offsetLeft; 

    if (pos != 0) { 
     setTimeout(function() { 
     element.style.left = pos + 150 + 'px'; 
    }, 1000); 
    } 
} 

Hinweis: es mir nicht klar war, warum Einige Ihrer Javascript sind da, ich könnte etwas verpassen. Ich habe versucht, eine minimale Darstellung zu erstellen.