有没有比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);
...