使ajax调用倍数来更新最终用户的结果

Question

我想使用AJAX和PHP多次更新浏览器结果。

这里的代码将调用一个getDest.php文件来检索所有将被追加到一个名为results的div ID的html文件，并且大约有21个城市。我想逐一展示每个城市，而不是一次展示所有城市。

我已经尝试了许多不同的方法，任何帮助表示赞赏。

<script> 
function hideContainer() { 
    jQuery('.city_container').hide(); 
}; 
function showContainer() { 
    jQuery('.citywrapper').hover(function() { 
    jQuery(this).find('.city_container').show(); 
    }, 
    function() { 
    jQuery('.city_container').hide(); 
    }); 
}; 
</script> 

<script> 
$.ajax({ 
    type: "GET", 
    url: "getDest.php" 
}).done(function(html) { 
    $("#results").append(html); 
    hideContainer(); 
    showContainer(); 
}); 
</script> 

getDest.php

<div class="citywrapper">city1 <div class="city_container">descript1</div></div> 
<div class="citywrapper">city2 <div class="city_container">descript2</div></div> 
<div class="citywrapper">city3 <div class="city_container">descript3</div></div> 
<div class="citywrapper">city4 <div class="city_container">descript4</div></div> 
<div class="citywrapper">city5 <div class="city_container">descript5</div></div> 
<div class="citywrapper">city6 <div class="city_container">descript6</div></div> 
.... 

Answer 1

什么这样的事情？如果你的ajax调用一次返回所有的HTML，我无法想象你为什么要多次拨打电话。

我在评论中添加了解释到底发生了什么，以防你不太熟悉jQuery。

<script> 
    $.ajax({ 
    type: "GET", 
    url: "getDest.php", 
    success: function(html) { 

     // Wrap the raw html into a jquery object 
     var elements = $(html); 

     // Loop through each top-level element in jquery object. 
     $.each(elements, function(i, el) { 

     setTimeout(function() { 

      // el points to the element at position i in jquery object 'elements' 
      $('#results').append(el); 

     // Each element takes one more second to append than the previous one 
     }, i * 1000); 
     } 
    } 
    }); 
</script> 

而不是只追加，您随时都可以用“显示：无”追加要素做一个整洁的动画CSS属性，然后显示了与jQuery的动画，例如它“el.slideDown（）”或“el.fadeIn（）”。

如果你希望它是在一秒钟以上结果之间被追加，只是为了交换

i * 1000 

i * seconds_in_between * 1000 

你应该考虑它是否对你很重要的前面元素在下一个之前完成显示 - 因为这将影响所需的时间。

此外，为了最佳实践，请在“成功”功能旁边加入“错误”功能，以防万一请求失败。你不希望用户点击很多次才发现没有任何事情发生 - 一定要让他们知道失败的原因。例如。 “无法加载城市列表。”

祝你好运！

Answer 2

我在JSFiddle上为您创建了一个code snippet。这里主要部分：

$(".city_container").each(function(index) { 
    var cityContainer = this; 
    setTimeout(function(){ 
     $(cityContainer).slideDown(); 
    }, index * 2000); 
}); 

后您添加内容到DOM可以用each在每一个项目进行迭代。然后为每个项目设置超时（，单位ms）。超时后，该项目将被显示。你也可以使用show()或其他任何东西来代替slideDown()做显示内容:)。