Javascript AJAX—显示AJAX结果之间的延迟时间

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

我希望有一个淡入动画，应用于每个搜索结果，稍微延迟，以便最后一个结果在最后淡入（即，第一个结果加载，开始淡入，下一个加载，开始淡入，等等）

我有将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');
    });
  });
});

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

HTML

<div id="main">

</div>

基本上，代码所做的（因此您不需要自己将其拼凑在一起）是添加搜索结果，该搜索结果具有关闭的

搜索项类

，并且一旦加载

（使用

setTimeout（）

），它将删除关闭的

类，然后使用
transition
CSS属性使其随时间逐渐淡入

我尝试在
.appendTo（'#main'）
上使用
setTimeout（）

我需要它，以便在
#main
元素中发布每个搜索结果时有延迟，以便在运行淡入动画时有延迟。
您的想法可行，但您需要在调用
setTimeout
时增加一点延迟。对于每个新结果，必须增加延迟。为确保其正常工作，请先使用长延时（1000，即1秒），然后根据需要使用lover值进行调整

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

下面是一个简单的代码片段，演示了如何使用
setTimeout
延迟对
append


$（函数（）{
var$container=$（“#container”）；
$。每个（['foo'，'bar'，'qux']，函数（i，值）{
setTimeout（函数（）{
$container.append（“”+value+“”）；
}，1000*i）；
});
});
您的想法可能会奏效，但您需要在调用
设置超时时增加一点延迟。对于每个新结果，必须增加延迟。为确保其正常工作，请先使用长延时（1000，即1秒），然后根据需要使用lover值进行调整

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

下面是一个简单的代码片段，演示了如何使用
setTimeout
延迟对
append


$（函数（）{
var$container=$（“#container”）；
$。每个（['foo'，'bar'，'qux']，函数（i，值）{
setTimeout（函数（）{
$container.append（“”+value+“”）；
}，1000*i）；
});
});
发生这种情况是因为
setTimeout
异步工作，这意味着这些
setTimeout
功能将在5ms、10ms、13ms等时间启动，并在类似时间启动。您可以在ajax调用上面定义一个
timeout
变量，并在
setTimeout
之前的
每次调用中增加timeout，并将此
timeout
变量作为
setTimeout
的超时值。以下是一个示例（我知道超时太多）：


var超时=0；
$（'div'）。每个（函数（）{
var$this=$（this）；
超时+=1000；
setTimeout（函数（）{
$this.hide（'slow'）；
}，超时）；
});

1.
2.
3.
4.
5
发生这种情况是因为
setTimeout
异步工作，这意味着这些
setTimeout
功能将在5ms、10ms、13ms等时间启动，并在类似时间启动。您可以在ajax调用上面定义一个
timeout
变量，并在
setTimeout
之前的
每次调用中增加timeout，并将此
timeout
变量作为
setTimeout
的超时值。以下是一个示例（我知道超时太多）：


var超时=0；
$（'div'）。每个（函数（）{
var$this=$（this）；
超时+=1000；
setTimeout（函数（）{
$this.hide（'slow'）；
}，超时）；
});

1.
2.
3.
4.
5
尝试使用

setTimeout(function() { ... }, 0);

将等待您的内容完全加载。
尝试使用

setTimeout(function() { ... }, 0);

它将等待内容完全加载。
尝试在$each（）函数的回调中使用超时

$.each（json，setTimeout（函数（键，值）{…}，1000））
尝试在$.each（）函数的回调中使用超时

$。每个（json，setTimeout（函数（键，值）{…}，1000））
你能把这个放到小提琴上吗？你能把这个放到小提琴上吗？谢谢。这是可行的，我现在需要修复一些显示问题（只是从删除类开始），谢谢。这是可行的，我现在需要修复一些显示问题（只是从移除类开始）哇，很棒的代码！我决定使用“
*
ing”超时（关于答案），而不是“
=+
ing”超时，但我会在未来记住这一点哇，很棒的代码！我决定使用“
*
ing”超时（关于答案），而不是“
=+
ing”超时，但我会在将来记住这一点