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 Fragesteller 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();

fluffiknuffi

28.06.2015, 23:09

PS: Ich habe das nicht getestet.

Fexxi96

Fragesteller

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

Fragesteller

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. :)

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

Fragesteller

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

Fexxi96

Fragesteller

29.06.2015, 13:29

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

fluffiknuffi

29.06.2015, 14:24

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

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?

Fexxi96

Fragesteller

28.06.2015, 22:46

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

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

Fragesteller

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

Fragesteller

28.06.2015, 23:08

@DerTod99

Stimmt, ändert aber gar nichts.. :/

Ähnliche Fragen

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

...zur Frage

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

...zur Frage

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

...zur Frage

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

...zur Frage

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

...zur Frage

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.

...zur Frage

JavaScript functionen stoppen?

Undzwar geht es das wenn function stop(){} ausgeführt wird das alle funktionen die in stop drinne sind gestoppt werden? Ohne eine schleife zu nutzen?

function stop(){
  //Skript der alle funktionen stopt
}

...zur Frage

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

...zur Frage

JavaScript: trigger() wird nicht ausgelöst?

Hi zusammen,

ich versuche mit JavaScript ein paar input-Felder zu validieren.

Leider wird die Seite nicht abgeschlossen, nachdem alle Felder befüllt wurden.
Hat jemand eine Idee?

Ich muss immer, nachdem alle Felder befüllt sind, nochmals in irgendein input-Feld klicken, damit es geht.

Hier mein Code:

$(document).ready(function() {
  $('input').on('click',function() {
    // Validation
    var vorname_firma = $("input[name='vorname']").val();
    var strasse = $("input[name='strasse']").val();
    var plz = $("input[name='plz']").val();
    var ort = $("input[name='ort']").val();

    if (vorname_firma != "" && strasse != "" && plz != "" && ort != "") {
      $(function() {
        $('#tab3').trigger("click");
      });
    }
  });
});

...zur Frage

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

}

});

...zur Frage

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

...zur Frage

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>

...zur Frage

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

...zur Frage

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.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen