Javascript аккордеон - отслеживание времени вопроса - PullRequest
Новая
       16

Javascript аккордеон - отслеживание времени вопроса

0 голосов
/ 29 мая 2010

Я читал об этом уроке JavaScript: http://www.switchonthecode.com/tutor...ccordion-menus По сути, он показывает, как создать аккордеон, используя чистый javascript, а не jquery. Все имело смысл для меня, пока фактическая часть отслеживания анимации. Он говорит: «Из-за всего этого первое, что мы делаем в функции анимации, - это вычисляем, сколько времени прошло с последней итерации анимации». И затем использует этот код: Код: 

var elapsedTicks = curTick - lastTick;

lastTick равно значению, когда функция была вызвана (Date (). GetTime ()), а curTick равно значению, когда функция была получена. Я не понимаю, почему мы здесь вычитаем одно из другого. Я не могу представить, что есть какая-то заметная разница во времени между этими двумя значениями. Или, может быть, я что-то упустил. Эта функция animate () вызывается только один раз при каждом нажатии заголовка меню или несколько раз для создания эффекта добавочной анимации? 

setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'" + openAccordion + "','" + nID + "')", 33);

Спасибо за любой ответ.

1 Ответ

0 голосов
/ 29 мая 2010

lastTick равно значению, когда функция была вызвана

lastTick равно значению, когда функция была ранее вызвана, в последнем кадре анимации. С тех пор сценарий вернул управление браузеру и попросил перезвонить за 33 миллисекунды.

Так что curTick-lastTick обычно будет около 33, но может быть намного выше, если браузер отстает из-за других вещей, происходящих в то же время. Вот почему отсчет времени нужно делать вообще.

Чаще всего в коде такого типа вы сохраняете время, в течение которого анимация началась , в переменной и используете setInterval, чтобы периодически проверять ее, вместо установки полностью новой функции тайм-аута. каждый раз (особенно установка тайм-аута из строки, что очень уродливо).

ет:

затем запускает функцию animate (), которая передает текущее время

Неа. Посмотрите на вызов по тайм-ауту еще раз: 

setTimeout("animate(" + new Date().getTime() + ","...

Это делает строку. new Date().getTime() оценивается во время установки времени ожидания, не во время вызова времени ожидания. В итоге получается строка вроде: 

setTimeout("animate(1275139344177, 250, 'Accordion4Content', 'Accordion4Content')", 33)

Который является временем в конце последнего кадра, а не временем истечения времени ожидания следующего кадра.

Помещение кода JavaScript в строку, подобную этой, очень запутанно, изобилует выходом из проблем и обычно считается очень плохой практикой. Было бы яснее сделать это с помощью встроенной функции: 

var passTick= new Date().getTime();
setTimeout(function() {
    animate(passTick, TimeToSlide, openAccordion, nID);
}, 33);
...