AJAX - Verzögerungszeit zwischen der Anzeige von AJAX-Ergebnissen

Question

Ich habe eine Suchfunktion, die eine AJAX-Anfrage verwendet, um Daten von meinem Webserver zu erhalten.

Ich möchte eine Fade-In-Animation, die auf jedes Suchergebnis angewendet wird, mit einer leichten Verzögerung, so dass das letzte Ergebnis zuletzt eingeblendet wird (dh das erste Ergebnis wird geladen, das Einblenden beginnt, das nächste lädt, beginnt etc.).

Ich habe den Code, der die HTML in den Suchergebnisbereich lädt, aber es scheint wie die Ergebnisse angezeigt werden und ihre "Fade-in-Animation" zur gleichen Zeit ausgeführt - obwohl dies auch aufgrund sein könnte die Tatsache, dass mein Computer zu langsam ist.

Hier ist mir Code:

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> 

Im Grunde, was der Code tut (so Sie es nicht brauchen, um sie zusammenzusetzen) ist es das Suchergebnis addiert, die die Klasse von search-item off hat, und sobald die <div> geladen wird (unter Verwendung von setTimeout()) es entfernt die off Klasse, welches dann das CSS-Attribut transition verwendet, damit es im Laufe der Zeit eingeblendet wird.

Ich versuchte mit setTimeout() auf der .appendTo('#main'), aber das hat nicht funktioniert.

Ich brauche es, so dass es eine Verzögerung beim Buchen jedes der Suchergebnisse im #main Element gibt, so dass es eine Verzögerung beim Ausführen der Fade-In-Animation gibt.

Answer 1

Ihre Idee könnte funktionieren, aber Sie müssen eine kleine Verzögerung zu Ihrem Anruf an setTimeout hinzufügen. Die Verzögerung muss für jedes neue Ergebnis erhöht werden. Um sicher zu sein, dass es funktioniert, verwenden Sie zuerst eine lange Verzögerung (1000, dh 1 Sekunde) und stellen Sie dann mit den gewünschten Werten ein.

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

Unten finden Sie eine einfache Code-Schnipsel, die die Verwendung von setTimeout zeigen die aufeinanderfolgenden Anrufe 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>

Answer 2

Dies geschieht, weil setTimeout arbeitet asynchron zu verzögern, welche diese setTimeout Funktionen bedeutet, dass Beginnen Sie mit 5ms, 10ms, 13ms usw. und feuern Sie zu ähnlichen Zeiten ab. Was Sie tun können, ist eine timeout Variable über Ajax Anruf definieren und erhöhen Timeout bei each Anruf vor setTimeout und geben Sie diese timeout Variable als Timeout-Wert an die setTimeout.Es folgt ein Beispiel (ich weiß zu viel Timeout):

var timeout = 0; 
 
$('div').each(function() { 
 
    var $this = $(this); 
 
    timeout += 1000; 
 
    setTimeout(function() { 
 
    $this.hide('slow'); 
 
    }, timeout); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>1</div> 
 
<div>2</div> 
 
<div>3</div> 
 
<div>4</div> 
 
<div>5</div>

Answer 3

try

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

Es wird warten, dass Ihre Inhalte vollständig geladen ist.

Answer 4

Versuchen Sie, das Timeout im Rückruf der Funktion $ .each() zu verwenden.

$.each(json, setTimeout(function(key, value) {...},1000))