javascript - AJAX - 显示 AJAX 结果之间的延迟时间

Question

我有一个搜索功能，它使用 AJAX 请求从我的网络服务器获取数据。

我想要淡入淡出动画应用于每个搜索结果，稍有延迟，以便最后一个结果淡入最后(即第一个结果加载，开始淡入，下一个结果加载，开始淡入，等等) .).

我有将 html 加载到搜索结果区域的代码，但它似乎结果正在同时显示和运行它们的“淡入动画”——尽管这可能也是因为我的电脑太慢了。

这是我的代码:

JS

$.ajax({
  type: 'GET',
  url: '/PersonSearch',
  data: {
    'search_value': search
  },
  dataType: 'json',
})
.done(function(json) {
  $('#main').html('');
  $.each(json, function(key, value) {
    var search = $('<div />', {
       id: 'search' + key,
       'class': 'search-item off',
       html: 
        '<div class="basic-info">' +
          '<span class="first-name">' + value.First_name + '</span>' +
          '<span> </span>' +
          '<span class="last-name">' + value.Last_name + '</span>' +
        '</div>' +
        '<div class="dropdown">' +
          '<span class="phone-number">' + 'PHONE: ' + value.Phone_number + '</span>' +
          '<span class="email">' + 'EMAIL: ' + value.Email_address + '</span>' +
          '<div class="box edit"><img src="../media/gear.svg"/></div>' +
        '</div>'
    }).appendTo('#main');
    setTimeout(function() {
      search.removeClass('off');
    });
  });
});

CSS

.search-item.off{
  opacity: 0;
  top: 8px;
}
.search-item{
  overflow: hidden;
  position: relative;
  opacity: 1px;
  top: 0;
  transition: .75s;
}

HTML

<div id="main">

</div>

基本上代码的作用(因此您不需要自己将其拼凑起来)是添加类为 search-item off 的搜索结果，一旦<div>加载(使用 setTimeout() )它删除了 off类，然后使用 transition CSS 属性使其随时间淡入。

我尝试使用 setTimeout()在 .appendTo('#main') 上但这没有用。

我需要它以便延迟在 #main 中发布每个搜索结果元素，以便在运行淡入淡出动画时出现延迟。

Answer 1

您的想法可能可行，但您需要在对 setTimeout 的调用中添加一点延迟。每个新结果都必须增加延迟。为确保它正常工作，首先使用较长的延迟(1000，即 1 秒)，然后根据需要调整情人值。

setTimeout(function() { ... }, 1000 * index);

下面是一个简单的片段，说明了如何使用 setTimeout 来延迟对 append 的连续调用

$(function() {
  var $container = $('#container');
  $.each(['foo', 'bar', 'qux'], function(i, value) {
    setTimeout(function() {
      $container.append('<div>' + value + '</div>');
    }, 1000 * i);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
</div>