Javascript AJAX：从文件夹加载图像并以交错延迟显示

我正在创建一个非常简单的画廊。它将住在Umbraco，我希望能够从多个文件夹中读取图像并按文件夹过滤。我有这部分下来，但我需要的图像，以显示一次一个略有延迟之间。延迟似乎根本不起作用。setTimeout也没有。它们只是同时显示。任何帮助都将不胜感激

$('body').on('click', '.filter-category',  function(){
var filter = $(this).data('filter'),
    dir = "../slides/" + filter;
$(this).toggleClass('filter-on');
if($(this).hasClass('filter-on')){

  $.ajax({
    url: dir,
    timeout: 2000,
    success: function(data) {
      $(data).find("a:contains(" + fileextension + ")").each(function(i) {
          var filename = this.href.replace(window.location.host, "").replace("http://", "");
          var newImg = ("<div class='gallery-image' data-category='" + filter + "' ><img src='" + dir + filename + "'></div>");
          $(newImg).delay(500).appendTo('.gallery').fadeIn(400);
      });
      updateSlides();
    }
  });
}else{
  $('.gallery-image').each(function(){
    var category = $(this).data('category');
    if(category == filter){
      $(this).remove();
    }
  });
  updateSlides();
}

$（'body'）。在（'click'，'filter category'，function（）上{
var filter=$（this）.data（'filter'），
dir=“../slides/”+过滤器；
$（this.toggleClass（'filter-on'）；
if（$（this）.hasClass（'filter-on'））{
$.ajax({
网址：dir，
超时时间：2000，
成功：功能（数据）{
$（数据）。查找（“a:包含（+fileextension+））。每个（函数（i）{
var filename=this.href.replace（window.location.host“”）.replace（http://“，”）；
var newImg=（“”）；
$（newImg）.delay（500）.appendTo（'.gallery'）.fadeIn（400）；
});
updateSlides（）；
}
});
}否则{
$（'.gallery image'）。每个（函数（）{
var category=$（this.data（'category'）；
如果（类别==过滤器）{
$（this.remove（）；
}
});
updateSlides（）；
}

}))

您可以用一行代码解决这个问题（如我的示例所示），但请阅读完整的答案以了解您的解决方案不起作用的原因

---

此代码：

  $(data).find("a:contains(" + fileextension + ")").each(function(i) {
      var filename = this.href.replace(window.location.host, "").replace("http://", "");
      var newImg = ("<div class='gallery-image' data-category='" + filter + "' ><img src='" + dir + filename + "'></div>");
      $(newImg).delay(500).appendTo('.gallery').fadeIn(400);
  });

或者这个（延迟）：

这就是为什么它们看起来是同时发生的，而不是惊人的

--

为了达到您想要的效果（惊人的效果），您需要确保每个图像在开始下一个图像的延迟之前完成其工作。实现这一点的方法有很多，但我将采取简单、务实的方法，只是增加时间

新代码：

  var delay = 500;

  $(data).find("a:contains(" + fileextension + ")").each(function(i) {
      setTimeout(() => {
          var filename = this.href.replace(window.location.host, "").replace("http://", "");
          var newImg = ("<div class='gallery-image' data-category='" + filter + "' ><img src='" + dir + filename + "'></div>");
          $(newImg).appendTo('.gallery').fadeIn(400);
      }, delay);

      delay += delay;
  });

500ms // 1st image
503ms // 2nd image
505ms // 3rd image
...

  var delay = 500;

  $(data).find("a:contains(" + fileextension + ")").each(function(i) {
      setTimeout(() => {
          var filename = this.href.replace(window.location.host, "").replace("http://", "");
          var newImg = ("<div class='gallery-image' data-category='" + filter + "' ><img src='" + dir + filename + "'></div>");
          $(newImg).appendTo('.gallery').fadeIn(400);
      }, delay);

      delay += delay;
  });

500ms  // 1st image
1003ms // 2nd image
1505ms // 3rd image
...