Geek asks and answers

Delay between each foreach javascript / php

I have a function that gets people from a database, and then, in jquery, goes through them, animating them. The problem that I see is quite common, is that javascript goes through all the elements within a second of a second, and the delay will apply to everyone. I have a stackoverflow search and found some links to this, but no one works with my code below. Any ideas would be greatly appreciated.

$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>

As you can see, the elements get a random horizontal start position and end position and random speed, this works well, except that there is still a large grouping of elements.

- , php , , , ifinite... ... wasn ' t.

, - .

... ... ...

+3
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 anything left to do, start a timer to animate
    // the next chunk of individuals.
    if(current < individuals.length)
        setTimeout(animateSome, 250);
}
animateSome();
+1

More articles:


All Articles