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的Jon Clements函数采用在完成时运行的回调参数：

<强>完整 Type: Function() 动画完成后调用的函数，每个匹配元素调用一次。

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

在JavaScript中有没有比setTimeout更好的东西？

1 个答案: