有沒有比JavaScript中的setTimeout更好的東西？

Question

在下面的代碼中，我必須引入setTimeOut()才能在第一個函數完全完成之前停止第二個函數的運行（請參閱filterMovies()的底部）。 在此之前，我試圖同時使用僅最終迭代的調用回調（在我的情況下，相同的代碼減去setTimeOut()和持續時間），但它仍將在第一個代碼完全執行之前運行。

我認為這是因為我正在處理數百個$(".movie")元素（盡管我不太清楚）。

setTimeOut()可以正常工作，但是就頁面的編碼和性能而言（在延遲后文本會更新）都顯得不佳。 本着更好的編碼實踐的精神，是否有一種更有效的說法：“嘿， updateSearchInfo ，甚至在最后一個元素滑升或滑落之后才考慮運行？

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

提前致謝！

Answer 1

jQuery的slide*函數采用在完成時運行的回調參數：

complete Type: Function()動畫完成后調用的函數，每個匹配的元素調用一次。

...
movie.slideDown(updateSearchInfo);
...