2016-08-09 23 views
0

Im folgenden Code musste ich setTimeOut() einführen, um die zweite Funktion zu stoppen, bevor die erste Funktion vollständig beendet wurde (siehe unten filterMovies()). Vorher habe ich versucht, beide Callbacks zu verwenden (in meinem Fall den gleichen Code minus setTimeOut() und Dauer), aber es würde immer noch laufen, bevor der erste Code vollständig ausgeführt wurde.Gibt es etwas besseres als setTimeout in JavaScript?

Ich nehme an, dies liegt daran, dass ich mit ein paar hundert $(".movie") Elemente zu tun habe (obwohl ich nicht wirklich weiß).

setTimeOut() funktioniert in Ordnung, aber es scheint unelegant, sowohl in Bezug auf die Codierung und Leistung auf der Seite (der Text aktualisiert nach einer Verzögerung). Im Sinne einer besseren Codierung der Praxis ist es eine effizientere Art und Weise „he sagen, updateSearchInfo, denken Sie nicht einmal über bis laufen danach sehr letztes Element hat entweder nach oben geschoben oder nach unten geschoben

?
function filterMovies() { 
    $(".movie").each(function(i) { 
    var movie = $(this); 

    var genreMatch = 
     !chosenGenres.length 
     ? true 
     : chosenGenres.every(elem => movie.find(".genre").text().indexOf(elem) !== -1); 

    var directorMatch = 
     !chosenDirectors.length 
     ? true 
     : chosenDirectors.every(elem => movie.find(".director").text().indexOf(elem) !== -1); 

    var countryMatch = 
     !chosenCountries.length 
     ? true 
     : chosenCountries.every(elem => movie.find(".countries").text().indexOf(elem) !== -1); 

    i === $(".movie").length -1 
     ? genreMatch && directorMatch && countryMatch 
     ? movie.slideDown(setTimeout(function() {updateSearchInfo()}, 1000)) 
     : movie.slideUp(setTimeout(function() {updateSearchInfo()}, 1000)) 
     : genreMatch && directorMatch && countryMatch 
     ? movie.slideDown() 
     : movie.slideUp(); 
    }); 
} 

function updateSearchInfo() { 
    movieCount = $(".movie:visible").length; 
    $("#search-info").text("Showing " + movieCount + " movies."); 
} 

Dank ! vorab

+0

jQuery Animationen haben in der Regel zwei Parameter, die Dauer und einen Rückruf, wenn Sie fertig - was Sie vorbei eine Zahl (ja, das Ergebnis SetTimeout eine Zahl ist), so ist es mit, dass als die Dauer .. Versuchen Sie 'movie.slideUp (updateSearchInfo)' usw. –

Antwort

3

jQuery slide* Funktionen nehmen einen Rückruf Parameter, der nach Abschluss läuft:

komplette Type: Function() Eine Funktion, die aufgerufen wird, sobald die Animation abgeschlossen ist und einmal pro übereinstimmendem Element aufgerufen wird.

... 
movie.slideDown(updateSearchInfo); 
... 
+1

Hinweis: Sie können beide Parameter weglassen, Dauer hat einen Standardwert von 400 in den SlideUp/Down-Funktionen mindestens –

+0

Perfekt, danke Ihnen beiden! – dedaumiersmith