#php #jquery #foreach #delay
#php #jquery #предварительный #задержка
Вопрос:
У меня есть функция, которая получает отдельные элементы из базы данных, а затем в 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, но это, я думаю, вызвало цикл ifinite … не уверен…страница не загружалась.
Я надеюсь, что кто-нибудь сможет указать мне правильное направление.
В идеале это должно анимировать несколько … подождать … а затем сделать еще немного…
Заранее спасибо
Комментарии:
1. вы пробовали jquery delay
Ответ №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();