Wie kann man in Javascript "for"-Schleifen verlangsamen?

Ich arbeite jetzt ein Jahr an Webseiten (Anfänger) und kenne mich schon mit den Basics von HTML, CSS, php und mySQL aus. Javascript brauche ich jetzt, ich will nämlich den Hintergrund einer Website im nachhinein verändern. Heißt: Nach einem "Intro" soll sich reibungslos die Hintergrundfarbe verändern. Nach ein paar Codeschnipseln bin ich nun so weit: var a = 64; b = 64; c = 64; function bgColor() { a++; b++; c++; document.body.style.backgroundColor= 'rgb(' + a + ',' + b + ',' + c + ')'; }

for (var i = 1; i < 200; i++) { setTimeout(function test(){ bgColor(); }, 1000) document.write(a); } Warum funktioniert das nicht? Die Farbe ändert sich sofort... document.write(a); ist mein debug, und es wird dauerhaft 64 ausgegeben. Ich habe schon mehrere Wege versucht, jetzt bin ich verzweifelt .. kann man die for-Schleife irgendwie anders verlangsamen?

5 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

fluffiknuffi

28.06.2015, 23:08

Bin zu faul das zu debuggen aber der Ansatz ist schon richtig. :) Allerdings setzt du in der Schleife 200 mal "sofort" einen Timeout in 1 Sekunde. D. h. eine Sekunde später wird die Funktion bgColor 200 Mal aufgerufen. Was du eher willst ist: Ein mal inital aufrufen und dann ruft sich die Funktion an ihrem Ende über einen Timeout selber durch. Sinngemäß:

var a = 64; 
var b = 64; 
var c = 64;

function bgColor() {
    a++; b++; c++;
    document.body.style.backgroundColor= 'rgb(' + a + ',' + b + ',' + c + ')';
    if (a < 255) { // Abbruchbedingung damit es keine Endlosschleife gibt
        window.setTimeout('bgColor', 1000);
    }
}
bgColor();

Fexxi96

Beitragsersteller

28.06.2015, 23:26

Das ist die Lösung, man muss nur noch bei

window.setTimeout('bgColor', 1000);

ein bgColor(); daraus machen! Danke!! ^^

fluffiknuffi

28.06.2015, 23:32

@Fexxi96

Joa. :)

fluffiknuffi

28.06.2015, 23:09

PS: Ich habe das nicht getestet.

Fexxi96

Beitragsersteller

28.06.2015, 23:24

@fluffiknuffi

Ok nice, ergibt in meinem Kopf Sinn .. bloß es passiert gar nichts. :(

fluffiknuffi

28.06.2015, 23:24

@Fexxi96

Es ist gemein von dir mich zu zwingen, es zu testen. :(

Fexxi96

28.06.2015, 22:43

Code nochmal:

    
        var a = 64;            b = 64;            c = 64;        function bgColor() {            a++;            b++;            c++;            document.body.style.backgroundColor= 'rgb(' + a + ',' + b + ',' + c + ')';        }        for (var i = 1; i < 200; i++) {            setTimeout(function alois(){                bgColor();            }, 1000)            document.write(a);        }

Fexxi96

Beitragsersteller

28.06.2015, 22:44

"function alois" = alois ist mein Testwort ^^

weed9r

29.06.2015, 11:19

Hi. Was du da baust ist veralteter code. Verwende lieber jQuery oder eine andere Bibliothek zur dommanipulation. Dort würde das so aussehen: $(document).ready(function(){ $("#deinDomElm").delay(1000).animate( { "background": "#fff" }, 250); }); }); wenn fehler drin sind tut es mir leid, schreib das mit dem handy

fluffiknuffi

29.06.2015, 14:24

Soweit ich weiß kann jQuery die background-Eigenschaft nicht von Haus aus animieren.

Fexxi96

Beitragsersteller

29.06.2015, 13:29

Danke, das werde ich mir genauer anschaun.. Einfach JQuery einbinden und das schreiben? ^^

jlemonde

29.06.2015, 11:02

setTimeout(function(){deinCode();},1000); /*Somit wird deinCode() jede Sekunde abgerufen*/

DerTod99

28.06.2015, 22:43

Ich kenn mich mit Java Script nich sonderlich aus aber müsste es nich document.write(r) heißen?

DerTod99

28.06.2015, 22:51

Ich glaub nich das es was hilft, denn ich bezweifle das es was bringt die Geschwindigkeit des Farbwechselns zu ändern aber du kannst die Farben statt plus 1 z.B. einfach plus 0.1 rechnen.

Fexxi96

Beitragsersteller

28.06.2015, 22:52

@DerTod99

hab ich schon versucht, funktioniert nicht .. deswegen frage ich ob irgendwo ein Fehler ist D:

DerTod99

28.06.2015, 23:01

@Fexxi96

Erfordert SetTimeout() kein ; am schluss?

Fexxi96

Beitragsersteller

28.06.2015, 23:08

@DerTod99

Stimmt, ändert aber gar nichts.. :/

Fexxi96

Beitragsersteller

28.06.2015, 22:46

document.write ist mein debug um zu testen ob die Schleife überhaupt funktioniert..

Ähnliche Beiträge

Ton abspielen Javascript?

Hallo,

Ich möchte auf meiner html Seite einen Sound abspielen, wenn ein Button geklickt wird. Die Seite läuft über den Localhost.

html:

 <script src="script.js"></script>
    <script src="anmeldungj.js"></script>
   <script src="/socket.io/socket.io.js"></script>
    <audio id="ringtone" src="Sound2.mp3"></audio>

JavaScript

var RingSound;
var Sound = new Audio('Sound2.mp3')
RingSound = document.getElementById("ringtone");
...
function Send() {
    if (delay && messageInput.value.replace(/\s/g, "") != "") {
        delay = false;
        setTimeout(delayReset, 1000);
        socket.emit("send", messageInput.value);
        messageInput.value = "";
        RingSound.play();
        Sound.play();
    }
}

Der Pfad stimmt:

Es wird aber kein Sound abgespielt, ich habe es über zwei Varianten versucht.

Ich hoffe jemand kann mir helfen

Jannik

...zum Beitrag

Javascript setTimeout Wiederholungen?

Schaut mal bitte folgendes Beispiel

var update=0;
function ReloadFunktionen()
{
 console.log(update);
 update=setTimeout(ReloadFunktionen, 1000);
}
ReloadFunktionen();

Die console.log Info zeigt mir das der Wert der Variable "update" am steigen ist, die Zahl wird immer groeser, ich frage mich ob dadurch mit der Zeit vielleicht der Browser immer mehr Speicher verbraucht, ob ich das falsch aufgebaut habe oder ob das normal ist das die Zahl welche setTimeout zurueck gibt immer weiter steigt.

Im Prinzip will ich das ganze als Endlosschleife benutzen damit bestimmte Funktionen immer wieder neu aufgerufen werden nach Ablauf von paar Sekunden.

...zum Beitrag

JavaScript: Warum springt die Galerie immer wieder zum ersten Bild zurück?

Hallo,

ich habe auf meiner Seite eine Galerie mit einigen Bildern. Diese kann ich öffnen/schließen und durchklicken.

Leider habe ich das Problem, dass wenn ich mich durch die Galerie durchklicke, er leider, warum auch immer, wieder zurück zum ersten Bild springt, anstatt die Bilder komplett durchzulaufen.

Ich finde den Fehler nicht.

HTML Code:

<div class="gallery-container">
  <div class="gallery" id="gallery">
    <!--Erste Reihe-->
    <img src="1_1.webp" alt="Bild 1_1" onclick="openModal();currentSlide(1)" class="hover-shadow cursor gallery-img" data-index="1">
    <img src="1_2.webp" alt="Bild 1_2" onclick="openModal();currentSlide(2)" class="hover-shadow cursor gallery-img" data-index="2">
    <img src="2.1.webp" alt="Bild 2_1" onclick="openModal();currentSlide(3)" class="hover-shadow cursor gallery-img" data-index="3">

    usw. bis

    <img src="8_2.webp" alt="Bild 8_2" onclick="openModal();currentSlide(23)" class="hover-shadow cursor gallery-img" data-index="23">
    <img src="8_3.webp" alt="Bild 8_3" onclick="openModal();currentSlide(24)" class="hover-shadow cursor gallery-img" data-index="24">
  </div>
  <div id="myModal" class="modal">
    <span class="close cursor" onclick="closeModal()">&times;</span>
    <div class="modal-content">
      <!-- Fügen Sie für jedes Bild in der Galerie eine Modal Slide hinzu -->
      <div class="mySlides">
        <img src="1_1.webp" style="width:100%">
      </div>
      <div class="mySlides">
        <img src="1_2.webp" style="width:100%">

        bis

      <div class="mySlides">
        <img src="8_2.webp" style="width:100%">
      </div>
      <div class="mySlides">
        <img src="8_3.webp" style="width:100%">
      </div>
    </div>

    <!-- Vorwärts/Rückwärts Kontrollen -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>

JavaScript:

function currentSlide(n) {
  showSlidesModal(slideIndex = n);
}

function showSlidesModal(n) {
  var i;
  var slidesModal = document.getElementsByClassName("mySlides");

  if (n > slidesModal.length) {
    slideIndex = 1
  }

  if (n < 1) {
    slideIndex = slidesModal.length
  }

  for (i = 0; i < slidesModal.length; i++) {
    slidesModal[i].style.display = "none";
  }

  slidesModal[slideIndex - 1].style.display = "block";
}

var galleryImages = document.getElementsByClassName("gallery-img");

for (var i = 0; i < galleryImages.length; i++) {
  galleryImages[i].onclick = function(event) {
    openModal();
    currentSlide(parseInt(event.target.getAttribute('data-index')));
  }
}

for (var i = 0; i < galleryImages.length; i++) {
  galleryImages[i].setAttribute('data-index', i + 1);
}

window.onclick = function(event) {
  if (event.target == document.getElementById('myModal')) {
    closeModal();
  }
}

function plusSlides(n, modal = false) {
  var slides;

  if (modal) {
    slides = document.getElementsByClassName("mySlides");
  }
  else {
    slides = document.getElementsByClassName("slide");
  }

  slideIndex += n;

  if (slideIndex > slides.length) {
    slideIndex = 1
  }

  if (slideIndex < 1) {
    slideIndex = slides.length
  }

  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  slides[slideIndex - 1].style.display = "block";

  if (!modal) {
    resetAnimations(slides[slideIndex - 1]);
  }
}

document.querySelector(".modal .prev").onclick = function() {
  plusSlides(-1, true);
};
document.querySelector(".modal .next").onclick = function() {
  plusSlides(1, true);
};

function openModal() {
  document.getElementById('myModal').style.display = "block";
}

function closeModal() {
  document.getElementById('myModal').style.display = "none";
}

showSlides(slideIndex);

...zum Beitrag

Wie kann ich das Ergebnis einer for-schleife in einer Variable speichern? (Javascript)

Hallo! Frage dürfte eigentlich klar sein. Ich will das Ergebnis meiner for-schleife in einer variable speichern. Also meine schleife gibt einen string x mal aus (AAA z.B.). Diesen String möchte ich dann in var speichern.. Meine idee lautete so:

for(var i = 0; i < 3; i++) {
    var s = (p)Hallo(/p);
  }

aber so funktioniert es nicht... in der variable sollte dann stehen:

Hallo

Hoffentlich kann mir jemand weiter helfen

...zum Beitrag

JavaScript function pausieren

Hallo nochmal,

langsam zweifle ich an meinem Verstand! Ein Fan von JavaScript werde ich in diesem Leben wohl wirklich nicht mehr...

Folgender Code:

function punktung() {
    var punkte = document.getElementById("punkte");
    if ( punkte.innerHTML.length > 3 ) {
        punkte.innerHTML = "";
        clearinterval(dots);
        setTimeout(function (){losgehts()}, 5000);
    }
    else  {
        punkte.innerHTML += ".";
    }
}

function losgehts() {
var dots = window.setInterval( function() { punktung() },500);
}

losgehts();

Das Script schreibt immer vier Punkte in ein Div und soll, nachdem die vier Punkte geschrieben wurden und die ID "Punkte" auf "" gekürzt wird, 5 Sekunden pausiert wird - danach das Gleiche wieder von vorne.

Ich lösche also den Interval "dots" und pausiere 5000 Millisekunden und rufe danach wieder die function "losgehts()" auf - warum funktioniert es aber wieder nicht? Es wird einfach keine Pause gemacht, sondern nach dem Kürzen einfach wieder von Vorne begonnen. Warum?

Über Antworten bin ich dankbar!

Grüße, Hummel

...zum Beitrag

JS - Canvas: Kann mir bitte jemand genau erklären, was in der for Schleife passiert?

Hallo,

kann mir bitte jemand genau erklären, was in der for-Schleife in der Funktion "drawNumbers" passiert?

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90

drawNumbers(ctx,radius);

function drawNumbers(ctx, radius) {
  var ang;
  var num;
  ctx.font = radius*0.15 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = 1; num < 13; num++){
    ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(),0,0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
  }

...zum Beitrag

for-Schleife mit let?

for (let i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 10);
}

Warum hat hier jeder Schleifen-Durchgang seine eigene Kopie von i?

Im Gegensatz zu

for (var i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 10);
}

wo immer dasselbe i benutzt wird?

Ich verstehe ja, dass let block-scoped ist, aber das „let i = 0;“ wird doch nur ein einziges mal ausgeführt, und zwar am Start, BEVOR die Schleifen-Durchgänge ausgeführt werden. Warum benutzen die ganzen Schleifendurchgänge dann nicht dieses eine i, wie es auch beim var der Fall ist? Wie kommt es, dass jede Iteration ihr eigenes i hat? Es wird doch lediglich die Überprüfung der Bedingung am Ende jedes Schleifendurchgangs durchgeführt, nicht die Deklaration?

Wenn ich die for-Schleife zu einer äquivalenten while-Schleife umschreibe teilen sich die Iterationen wie erwartet das selbe i, trotz des lets.

let i = 0;
while (i < 5) {
  setTimeout(() => console.log(i), 10);
  i++;
}

...zum Beitrag

JavaScript function beenden

Hallo zusammen,

folgende Codes:

function blabla(abbrechen) {

    if (abbrechen == "JA") {
    return;
    }

    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
    }
    
    else {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("ausgabe").innerHTML=xmlhttp.responseText;
        }
    }
    
    xmlhttp.open("GET","blablabla.php",true);
    xmlhttp.send();
    
}



setInterval(function () {blabla()}, 5000);
var abbrechen = "JA";
setTimeout(function (){blabla(abbrechen)}, 10000);

Ich verstehe leider nicht, warum meine Function "blabla" nicht nach 10 Sekunden beendet wird. Immerhin gebe ich das mit

setTimeout(function (){blabla(abbrechen)}, 10000);

doch an?!

Über eine Aufklärung wäre ich dankbar!

-> Ich möchte einfach nur, dass die obige Funktion mit dem Interval alle 5 Sekunden ausgeführt wird, aber darunter nach 10 Sekunden mit TimeOut beendet wird. Was passt dem Programm nicht?

Grüße, Hummel

...zum Beitrag

Javascript funktion um gewisse Uhrzeit, setinterval Ressourcen Belastung?

Hallo zusammen

Ich bräuchte eine function, welche immer um die gleiche Uhrzeit, jeden Tags ausgeführt wird. Jeden Tag um 23:59

Nun habe ich eine setInterval function welche jede sekunde ausgeführt wird. wenn die aktuelle uhrzeit 23:59:0 betrifft, wird die eigentliche function ausgeführt.

Meine Frage: Ist das sehr ressourcen verbrauchend, da jede sekunde abgefragt wird?

function tick() {
  //get the mins of the current time
  var mins = new Date().getMinutes();
  var sec = new Date().getSeconds();
  var hours = new Date().getHours();
  var time_stamp = "23:59:0";
  var time_stamp = "15:20:0";
  var current_time = hours + ":" + mins + ":" + sec;
  
  if (current_time == time_stamp) {
    alert('Do stuff');
  }
  console.log('Tick ' + hours + ":" + mins + ":" + sec);
}


setInterval(tick, 1000);

...zum Beitrag

JavaScript Textboxen die aufklappen

Kann kein JavaScript. Kann man das vielleicht so umschreiben, dass es möglich wird, in den Link auch noch etwas anderes rein zu schreiben als wie die Wörter die in dem Script abgeglichen werden. Also "[Aufklappen]" und "[Schliessen]" ...

Ich will halt, dass man auf der ganzen div-box, die um den Link liegt, drauf klicken kann..

var ie4 = false; if(document.all) { ie4 = true; }
function getObject(id) {
if (ie4) {
return document.all[id];
} else {
return document.getElementById(id);
}
}
function toggle(link, divId) {
var lText = link.innerHTML; var d = getObject(divId);
if (lText == '[Aufklappen]') {
link.innerHTML = '[Schliessen]'; d.style.display = 'block';
} else { link.innerHTML = '[Aufklappen]'; d.style.display = 'none';
}
}




<div>
    <div>
        <a href="javascript: void(0);" onClick="toggle(this, 'box1');">[Aufklappen]</a>
    </div>
    <div id="box1" style=display:none>
        // Inhalt aufgeklappt
    </div>
</div>

...zum Beitrag

Bilder bei jquery/JavaScript nach bestimmter zeit austauschen?

Erstmal entschuldigung für die komische Überschrift, ich schmeiße manchmal die beiden gerne durcheinander.

Ich hab auf meiner Seite einen Timer (fürs Beispiel 30s), der mit einem Button gestartet werden. Am Anfang soll Bild1 stehen. Nachdem der Timer bei der Hälfte der Zeit angekommen ist (hier 15s) soll Bild2 dort erscheinen wo Bild1 vorher war. Ist der Timer bei 0 angekommen, wird man auf eine andere Seite weitergeleitet.

Wie mache ich das am besten?

Hier mein bisheriger Code

$(document).ready(function (e) {

var $timer = $("#timer");

var stop = false;

var timerLoop;

$( "#button_start" ).click(function() {

timerLoop = setInterval(function(){ update() }, 1000);

});

function update() {

if(!stop){

var myTime = $timer.html();

var ss = myTime.split(":");

var dt = new Date();

dt.setHours(0);

dt.setMinutes(ss[0]);

dt.setSeconds(ss[1]);

var dt2 = new Date(dt.valueOf() - 1000);

var temp = dt2.toTimeString().split(" ");

var ts = temp[0].split(":");

if(ss[0] === "00" && ss[1] === "01"){

stop = true;

clearInterval(timerLoop);

$("body").load( "./erfolgreich.html" );

}

$timer.html(ts[1]+":"+ts[2]);

//setTimeout(update, 1000);

}

});

...zum Beitrag

Java Script wie kann ich das dauerhaft wiederholen?

const cars = ["saab", "Volvo", "BMW", "Mercedes"];
async function timer() {

for (let i=0; i < cars.length; i++) {

    console.log(cars[i]);
    await sleep(2000);
}
}

timer();
function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

...zum Beitrag

Warum wird meine Seite nicht aktualisiert?

Hallo,

ich wollte machen, dass, wenn ich in Python etwas sage, ein Div im HTML eingefügt wird. Das funktioniert auch ganz gut, aber, da ich kein Websockets verwende, muss ich die Seite immer manuell aktualisieren, wenn der Div eingefügt wurde, damit es ihn auch anzeigt. Diese Funktion wollte ich automatisieren, doch es funktioniert nicht, wieso?

// FLASK
function detectWakeWord() {
    var detectedWord = 'luna'; 
    
    if (detectedWord === 'luna') {
        if (!document.getElementById('luna_wake_word')) {
            var div = document.createElement('div');
            div.id = 'luna_wake_word';
            document.body.appendChild(div);
            showWakeWord();
            
            setTimeout(function() { 
                location.reload(); 
            }, 1000); 
        }
    }
}

detectWakeWord();

Freundliche Grüsse

...zum Beitrag

PHP-Funktion auslösen bevor man die Seite verlässt?

Ich probiere grade aus, meine eigenen „Google Analystics“ zu machen, da das Originale zu teuer ist. Egal, kommen wir zurück zum Thema. Wie füge ich Daten zu einer MySQL-Datenbank hinzu, genau dann, wenn der User die Seite verlässt. Ich habe es bereits mit diesem JavaScript versucht:

How do i run PHP-Functions before the page unloads bwz. close? I tried `beforunload` but it never really worked. I want to insert a record for analystics into php database. Here is the JavaScript:


```
const beforeUnloadListener = (event) => {
   document.write(' <?php 
		$sql2 = "DELETE FROM `SwiftSpion` WHERE ip = `$ip`";
$result2 = $conn->query($sql2);
	?> ');
}

window.addEventListener("beforeunload", beforeUnloadListener);

	const pageHideListener = (event) => {
    document.write(' <?php 
		$sql2 = "DELETE FROM `SwiftSpion` WHERE ip = `$ip`";
$result2 = $conn->query($sql2);
	?> ');
}
document.onvisibilitychange = function() {
  if (document.visibilityState === 'hidden') {
		document.write(' <?php 
		$sql2 = "DELETE FROM `SwiftSpion` WHERE ip = `$ip`";
$result2 = $conn->query($sql2);
	?> ');
  }
};

window.addEventListener("pagehide", pageHideListener);
```



I expect, that the MySQL-Command works when the user leaves the site.

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen