jquery .delay() innerhalb setInterval

Question

Ich benutze setInterval mit jQuery Verzögerung.

Aber die delay() Inside SetInterval scheint nicht zu funktionieren oder es wartet nicht 3 Sekunden (in setInterval).

Mein Ziel:

• 3 Sekunden warten erste
• drucken Hallo Wort 10
• dann 2 Sekunden warten, bis Fadeout
• 3 Sekunden warten
• Druck hallo Wort 9
• und so weiter ...

Der Ausschnitt unten zeigt, dass es nur 2 Sekunden wartet und druckt.

Danke in fortgeschrittenen Kerlen. :)

count = 10; 
 
// store setInterval ID in var 
 
var interval = setInterval(function(){ 
 
    // log value of count 
 
    console.log(count); 
 

 
    $('.output').append(
 
    " hello world"+count+"<br>" 
 
    ).hide().fadeIn(1000).delay(2000).fadeOut('slow'); 
 

 
    if(count <= 0) { 
 
     // if count reaches 10 the clear using interval id 
 
     clearInterval(interval); 
 
    } else { 
 
     // otherwise increment count 
 
     count--; 
 
    } 
 
    }, 3000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="output"></div>

Answer 1

Ich schlage vor, Verwenden Sie setTimeout, um auf fadeOut zu warten, um die Animation zu beenden.

count = 10; 
 
setTimeout(function onTimeout(){ 
 
    // log value of count 
 
    console.log(count); 
 

 
    $('.output').append(
 
    " hello world"+count+"<br>" 
 
    ).hide().fadeIn(1000).delay(2000).fadeOut('slow', function() { 
 
     if(count > 0) { 
 
     count--; 
 
     setTimeout(onTimeout, 3000); 
 
     } 
 
    }); 
 
}, 3000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="output"></div>

Answer 2

Verwenden Sie zu einer Funktion eine rekursive Aufruf, wenn letzte Animation abgeschlossen ist, statt. Es ist sehr schwierig setTinterval mit einer Reihe von Animationen zu synchronisieren und nicht eine vor dem anderen haben zu bekommen, und die Differenz wird immer übertrieben im Laufe der Zeit

Etwas wie:

var delay =1000;//speeded up dfor demo 
 
var count = 10; 
 
// store setInterval ID in var 
 
function counter() { 
 
    // log value of count 
 
    console.log(count); 
 

 
    $('.output').append(
 
    " hello world" + count + "<br>" 
 
).hide().fadeIn(1000).delay(2000).fadeOut('slow', function() { 
 
    // fadeOut finished, decide to do it again or not 
 
    if (count > 0) { 
 
     count--; 
 
     // call function again   
 
     setTimeout(counter,delay); 
 
    } 
 
    }); 
 
} 
 

 
setTimeout(counter,delay)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="output"></div>

Answer 3

Die besten Ihr Ziel zu erreichen, ist SetTimeout statt setInterval zu verwenden. Sie können es wie folgt verwenden:

<script> 


//alert("js"); 

function fadeOut() 
{ 
    alert('do fadeout here'); 
} 

function hello() 
{ 
    alert('say hello word'); 

    setTimeout(fadeOut,2000); 
} 

function first() 
{ 
    setTimeout(hello,3000); 
} 

//setTimeout(null,3000); 
setTimeout(first(), 3000) ; 
//alert('hello'); 

</script> 

Ich hoffe, es hilft.

Answer 4

das ist meine Lösung. danke

count = 10; 
 
setTimeout(function onTimeout(){ 
 
    // log value of count 
 
    console.log(count); 
 

 
    $('.output').append(
 
    " hello world"+count+"<br>" 
 
    ).hide().fadeIn(1000).delay(2000).fadeOut('slow', function() { 
 
     if(count > 0) { 
 
     count--; 
 
     setTimeout(onTimeout, 3000); 
 
     } 
 
    }); 
 
}, 3000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="output"></div>