[JQUERY] Blinkende Tabellenreihen

[Nalia]

Hallo ihr,
ich hoffe, ihr könnt mir bei meinem Problem helfen:
Ich möchte die einzelnen Reihen meiner Tabelle nacheinander blinken lassen. Bei einer einzelnen Reihe funktioniert das Script, sobald ich die Schleife laufen lasse, blinken einfach nur alle Reihen gleichzeitig auf. Wo liegt mein Denkfehler?

Hier Script dazu:

function blinkH() {
    var rows = new Array(0,1,2,3,4,3,2,2,2);
    for(var i=0;i<rows.length;i++) {
        $('#block tr:eq('+rows[i]+')').addClassDelay('bg-red',1000);
    }
}

$.fn.addClassDelay = function(className,delay) {
    var $addClassDelayElement = $(this), $addClassName = className;
    $addClassDelayElement.addClass($addClassName);
    setTimeout(function(){
        $addClassDelayElement.removeClass($addClassName);
    },delay);
};

Die Function blinkH() wird dann in der document.ready(function) aufgerufen.
LG
Nalia

 

[Dormilich]

Wo liegt mein Denkfehler?

Die Schleife wartet nicht auf setTimeout(). setTimeout() ist keine Funktion, die die Code-Verarbeitung pausiert, sondern setzt einen Timer für den auszuführenden Code. D.h. es werden erst (gleichzeitig (naja, fast)) alle timeouts gesetzt, und nachdem die timeouts auslaufen, wird der Code ausgeführt (was dann eben auch (fast) gleichzeitig passiert).

 

[xorg1990]

Genau(naja fast) zu diesem Thema habe doch neulich noch ein Video geshen:

Mit Promises könnte man sich da raus reden.

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

function blinkH() {
    var rows = new Array(0,1,2,3,4,3,2,2,2);
    for(var i=0;i<rows.length;i++) {
        $('#block tr:eq('+rows[i]+')').addClassDelay('bg-red',1000);
    }
}

$.fn.addClassDelay = function(className,delay) {
    (async () => {
        var $addClassDelayElement = $(this), $addClassName = className;
        $addClassDelayElement.addClass($addClassName);
        await sleep(delay);
        $addClassDelayElement.removeClass($addClassName);
    })(); 
};

Das ist allerdigns mehr ein Hack als eine Lösung und ungetestet.
Ob man das in der gängigen Praxsis einsetzen sollte steht auch im Raum.

Habe das noch nie innerhalb einer schleife eingesetzt, könnte die cpu last hochtreiben.

So geht's auf jeden:

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

async function doSleep(ms) {
	await sleep(ms);
	alert("viel später");
}

doSleep(1000);

Ich würde ja in einem setInterval das array durch iterieren und gegebenfalls das ganze mit clearinterval beenden.

 

[Nalia]

Danke für die Hilfe, werde es heute abend testen.