Помогите понять поведение скрипта
есть функция, которая размещает на странице контейнер DIV. В этом контейнере находятся несколько вложенных контейнеров, позиционированных относительно родителя и приподнятых вверх, чтобы пользователь их изначально не видел на странице:
function MovingDIV() { rslt = '<div style="position: relative; top: 0px; border-color: gray; border-style: solid; border-width: 1px;">'; rslt += '<div style="position: relative; background-color: #ccccff; top: -480px; z-index: -100; " id="moving0">'; rslt += '<table><tr><td>Param0</td></tr></table>'; rslt += '</div>'; rslt += '<div style="position: relative; background-color: #ffcccc; top: -480px; z-index: -101;" id="moving1">'; rslt += '<table><tr><td>Param1</td></tr></table>'; rslt += '</div>'; rslt += '<div style="position: relative; background-color: #ccffcc; top: -480px; z-index: -102;" id="moving2">'; rslt += '<table><tr><td>Param2</td></tr></table>'; rslt += '</div>'; rslt += '<div style="position: relative; background-color: #fccccf; top: -480px; z-index: -103;" id="moving3">'; rslt += '<table><tr><td>Param3</td></tr></table>'; rslt += '</div>'; rslt += '<div style="position: relative; background-color: #cfccfc; top: -480px; z-index: -104;" id="moving4">'; rslt += '<table><tr><td>Param4</td></tr></table>'; rslt += '</div>'; rslt += '</div>' document.getElementById('mainTD').innerHTML = rslt; document.getElementById('moving0').style.top = "-240px" timer1 = setInterval('MoveDIV(5)', 50); } Есть вторая функция, задача которой отобразить вложенные DIV'ы (они как бы падают сверху страницы на положенное им место, причем не все вместе и сразу, а один за другим): timer1; iter = 0; function MoveDIV (itemcount) { i = 0; T = 0; while (i < itemcount) { if (iter < i) { T = document.getElementById('moving' + i).offsetTop; } else { T = document.getElementById('moving' + i).offsetTop + 10 ; } if (T > 0) { T = 0; } document.getElementById('moving' + i).style.top = T + "px"; i++ } iter++; if (iter == (itemcount - 1 + 24)) { clearInterval(timer1); } } В принципе все работает (правда, почему-то в обратном порядке, ну это мелочи)... вопрос в другом - каждый следующий контейнер опускается визуально медленнее предыдущего - в итоге первый опускается быстро, а последнего (с индексом 0) приходится терпеливо ждать). Почему так происходит и как с этим справиться? |
var нужно к переменным, да. у вас они не сбрасываются.
|
про которые переменные вы говорите? Если про Т и i, то они при каждой итерации функции MoveDIV должны принудительно ставиться в ноль - если бы этого не происходило, то DIVы двигались хаотично. Объявление их через var все равно ничего не поменяло - последний "падающий" DIV (с индексом 0) значительно тормозит по сравнению с самым первым...
переменная iter до остановки таймера и не должна сбрасываться. Единственный пока выход - это существенно сократить время в setInterval - тогда визуально не успеваешь заметить разницу... но из-за этого теряется эффект "выпадания". И еще один момент - серьезные тормоза особенно касаются DIVов с индексами от 0 до 2 независимо от общего числа таких контейнеров... я увеличил их число с 5 до 20 штук для проверки... |
Ладно. Вопрос решил сам.
|
Часовой пояс GMT +3, время: 02:14. |