Warum verursacht mein jquery animate() Callback einen Überlauf? Rekursion

Question

Ich verwende einen rekursiven Rückruf mit der Funktion animate() jquery. Allerdings stürzt die Seite jedes Mal von Anfang an ab.

var goingDown = true; 

function animateChevron() { 
     if (goingDown) { 
      goingDown = !goingDown; 
      $('#chevron').animate({'opacity': 1}, 500, animateChevron); 
     } 
     else { 
      goingDown = !goingDown; 
      $('#chevron').animate({'opacity': 0.1}, 500, animateChevron); 
     } 
} 

$(document).ready(function(){ 
    animateChevron(); 
}); 

Danke

EDIT: Ich habe es in einer Schleife handeln wollen: die Sparren erscheint, verschwindet dann, dann wieder usw. erscheint Solange der Benutzer auf der Seite ist.

Answer 1

Bitte versuchen Sie diese

$(document).ready(function(){ 
 
\t var speed=500; //in micro seconds 
 
\t setInterval(function(){ 
 
\t \t 
 
    var opacity=$('#chevron').css('opacity')<1 ? 1 : .1; 
 
\t \t $('#chevron').animate({'opacity':opacity},speed); 
 
    
 
\t },speed); 
 
});

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

 
<div id="chevron">Chevron</div>

Answer 2

Ihr Code rekursiv unendlich.

habe ich es einen Parameter goingDown, hinzuzufügen, die, wenn sie wahr wird die Animation veranlassen, die zickzack, und stellen Sie den Zustand einer globalen Variablen down passen goingDown zu verstecken. Ich habe die Rekursion entfernt, du brauchst sie nicht.

var downState = null; 
 

 
function animateChevron(goingDown) { 
 
    if (!goingDown) { 
 
     $('#chevron').animate({ 
 
     'opacity': 1 
 
    }, 500); 
 
    } else { 
 
    $('#chevron').animate({ 
 
     'opacity': 0.1 
 
    }, 500); 
 
    } 
 
    downState = goingDown; 
 
} 
 

 
$(document).ready(function() { 
 
    animateChevron(true); 
 
});

#chevron { 
 
font-size: 28px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="chevron"> 
 
&raquo; 
 
</div>

Answer 3

Versuchen Sie, diese

$('#chevron').animate({'opacity': 1}, { 
    duration: 500, 
    complete: animateChevron 
}); 

Auch können Sie dies besser machen

function animateChevron() {  
$('#chevron').animate({'opacity': 1}, { 
    duration: 500   
}).animate({'opacity': 0.1}, { 
    duration: 500, 
    complete: animateChevron  
});   
} 

Answer 4

Hier ist eine andere Lösung ist aufgrund der Lösung, die ich zuerst angeboten (kann immer noch sein, (am Ende dieser Antwort gefunden) nicht den Bedürfnissen der a Skier.

Entsprechend der folgenden Frage verursachen Async-Callbacks keine Stapelüberläufe.

Will recursively calling a function from a callback cause a stack overflow?

(function animateChevron() { 
 
    // Chevron visible at this point 
 
    $('#chevron').animate({'opacity': 0}, 500,() => { 
 
    // Chevron invisible at this point 
 
    $('#chevron').animate({'opacity': 1}, 500, animateChevron); 
 
    }); 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="chevron">Chevron</div>

---

fand ich eine sehr saubere Lösung direkt hier bei Stackoverflow als Alternative.

How to make blinking/flashing text with css3?

-Code-Schnipsel von Mr. Alien:

(function blink() { 
 
    $('#chevron').fadeOut(500).fadeIn(500, blink); 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="chevron">Chevron</div>