php - 每个 foreach javascript/php 之间的延迟

Question

我有一个函数可以从数据库中获取个体，然后在 jquery 中运行它们，为它们设置动画。问题......我看到的是相当普遍的事实是 javascript 在瞬间运行所有项目并且延迟将应用于所有项目。我搜索了 stackoverflow 并找到了一些对此的引用，但没有一个适用于我下面的代码。任何想法将不胜感激。

$individuals = $wpdb->get_results("SELECT * FROM wp_sisanda_individualsponsors");

?>

<script type="text/javascript">
function individual_sponsors() {
    var individuals = <?php echo json_encode($individuals) ?>;
    individuals.sort(function() { return 0.5 - Math.random() });
    jQuery.each(individuals, function (i, elem) {
        var topRand = Math.floor(Math.random()*301);
        var leftRand = Math.floor(Math.random()*301);
        var startLeftRand = Math.floor(Math.random()*301);
        jQuery('.individuals').append('<div id="'+ elem.id + '" class="indiv" style="position: absolute; bottom: -70px; left:' +  startLeftRand +'px;">' + elem.name + '</div>');
        jQuery('#' + elem.id).animate({
            top: -100,
            left: Math.floor(Math.random()*301)
        },20000 + Math.floor(Math.random()*50000));
    });
    }
</script>

如您所见，项目获得了随机的水平开始位置和结束位置以及随机速度，这很有效，除了仍然有大量的项目。

我曾尝试限制最初请求的数量 - 随机选择一些然后重复调用该函数，中间有一个 php 等待，但我认为这导致了无限循环...不确定...页面不是'加载。

我希望有人能指出我正确的方向。

理想情况下，它会激活一些...等等...然后再做一些...

提前致谢

Answer 1

PHP 等待对您没有帮助，因为 PHP 在任何内容发送到客户端(JavaScript 执行的地方)之前在服务器上执行。如果你想制作一些动画，稍等一下，然后再制作一些动画，直到完成，然后你可以使用 setTimeout。 :

var current = 0;
function animateSome() {
    // Animate a few (starting at individuals[current]) and
    // update current with the array index where you stopped.
    // ...

    // If there's anything left to do, start a timer to animate
    // the next chunk of individuals.
    if(current < individuals.length)
        setTimeout(animateSome, 250);
}
animateSome();