Из-за цикла не работает анимация
Здравсвуйте
Есть код анимации
window.onload = function()
{
var distance = 1,
speed = 0.5,
li = document.getElementById("lists-r1").children,
arrayCoords = [0, 26, 53, 78, 104, 130, 156, 182, 208, 234, 260],
count = 1,
i = 0,
arrayCoordsMax = li.length;
for(i; i <= arrayCoordsMax; i ++)
{
alert(li[i].offsetTop)
}
function animate()
{
distance = distance + speed;
document.getElementById("playDiv-r1").style.top = distance + "px";
if(distance == arrayCoords[count])
{
setTimeout(animate, 1500);
count ++;
}else
setTimeout(animate, 10);
if(distance == 260)
speed = 0;
};
animate();
};
</script>
Сейчас анимация не работает, но если убрать цикл for, то все сразу заработает. В чем проблема, подскажите ? |
li = document.getElementTagName(имя тега но не ид); for(i; i <= arrayCoordsMax; i ++) { alert(li[i].offsetTop) } или потомков элемента нужно найти но в лбом развале это |
Уже разобрался.
|
Цитата:
|
Проблема возникла в другом, если я пишу ф-ю, как "немедленно вызываемую", то почему-то не работает анимация
window.onload = function()
{
var distance = 1,
speed = 0.5,
li = document.getElementById("lists-r1").children,
count = 1,
i = 0;
(function()
{
distance = distance + speed;
document.getElementById("playDiv-r1").style.top = distance + "px";
if(distance == li[count].offsetTop)
{
setTimeout(animate, 1500);
count ++;
}else
setTimeout(animate, 10);
if(distance == 260)
speed = 0;
}());
};
Вроде ф-я написанна правильно |
действительно,есть такое дело
|
Цитата:
|
Цитата:
|
Цитата:
|
нет не правильно. сначала закрывается скобка тело функции) ,затем её вызов().
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
посмотри свой вчерашний вопрос-там тебе кинул вариант с одним таймером и дальше
http://shamansir.github.com/JavaScri...other.timeouts |
Спасибо!
|
Цитата:
<div id="div">
<p></p>
<p></p>
</div>
<script>
var p = document.getElementById('div').getElementsByTagName('p'),
i = p.length;
while(i--) {
p[i].innerHTML = p[i].nodeName;
}
</script>
<div id="div">
<p></p>
<p></p>
</div>
<script>
var p = document.getElementById('div').children,
i = p.length;
while(i--) {
p[i].innerHTML = p[i].nodeName;
}
</script>
<div id="div">
<p></p>
<p></p>
</div>
<script>
var p = document.getElementById('div').childNodes,
i = p.length;
while(i--) {
if(p[i].nodeName === 'P' && p[i].nodeType === 1)
p[i].innerHTML = p[i].nodeName;
}
</script>
Цитата:
//в этом случае сперва происходит группировка, затем вызов, как Function Expression
(function() {
alert(this);
})();
//сперва происходит объявление функции как Function Expression и вызов, затем закрывается оператор группировки
(function() {
alert(this);
}());
//объявление функции как Function Expression и вызов, оператор группировки в этом случае не нужен
!function() {
alert(this);
}();
Цитата:
// как в Python
if(0 == 1)
alert(false)
else if(1 == 2)
alert(false)
else
alert('не то не другое не верно');
//так советует Д. Крокфорд
if(0 == 1) {
alert(false)
}
else if(1 == 2) {
alert(false)
}
else {
alert('не то не другое не верно');
}
// менее читабелен, но все же рабочий
if(0 == 1) alert(false); else if(1 == 2); else alert('не то не другое не верно');
// тоже самое, что и передыдущий
if(0 == 1) alert(false);
else if(1 == 2);
else alert('не то не другое не верно');
//из всех вариантов, лично я выберу этот alert(0 == 1 ? 0 : 1 == 2 ? 0 : 'не то не другое не верно'); ты наверно не поверишь, но даже так работает:
<div id="div">
<p></p>
<p></p>
</div>
<script>
var
p
=
document
.
getElementById
(
'div'
)
.
childNodes
,
i
=
p
.
length
;
while
(
i--
)
{
if
(
p
[
i
]
.
nodeName
===
'P'
&&
p
[
i
]
.
nodeType
===
1
)
alert
(
p
[
i
]
.
nodeName
)
}
;
</script>
Как говорится, вкус и цвет, товарищей нет, главное незагнаться ;) |
1 -о двух вариантах знал, об этом не знал(до того как написать-в гугл забил эту конструкцию -выдача нулевая-фильтры чтоли...нашел только на 5 странице выдачи )
2 -везде встречал только первый вариант -об остальных не знал:thanks: 3 о первом варианте недавно читал что воспримет как разные не связанные строки(такой записью не пользуюсь-поэтому там написал что не знаю но это дурной тон оформления) |
monolithed,
по второму пункту -есть какаято существенная разница между ними? |
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
//1
var foo = function() {};
//2
var foo = new function() {};
//3
var foo = function() {
return function() { //и эта тоже Function Expression
//..
}
}
//4
foo(function() {
//..
});
var foo = {
bar : function() {
}()
};
//5
0,function() {}; //,[] ,{}, ,'' ,любой объект
!function() {}; // ,+ ,- ,~ ,!
//6
(function() {
})(); //}())
// конструкции ниже, не относится ни к FE ни к FD:
//7
[].constructor(function() { //,[] ,{}, ,'' ,любой объект
}());
//8
(Function('alert("..")'))();
//и даже без единого слова function
([].constructor.constructor(
//..
)
)();
и так далее.. т.е. основное визуальное отличие Function Expression от Function Declaration в том, что Function Expression не может начинаться с ключевого слова function , за исключением, возврата каретки. Более подробно можно тут |
monolithed,
:thanks: |
Цитата:
|
Сделал следующим способом
window.onload = function()
{
var distance = 1,
speed = 0.5,
li = document.getElementById("lists").children,
count = 1,
i = 0;
(function ()
{
distance = distance + speed;
document.getElementById("playBar").style.top = distance + "px";
if(distance == li[count].offsetTop)
{
setTimeout(arguments.callee, 1500);
count ++;
}else
setTimeout(arguments.callee, 10);
if(distance == 260)
speed = 0;
}());
};
Но, в ES5 свойство arguments.callee недоступно в строгом режиме, поэтому спецификация советует лучше воздерживаться от его использования в будущем, а также удалять все обращения к этому свойству. Подскажите, чем я могу заменить в данном случае свойство arguments.callee ? |
(function eternal(){
setTimeout(eternal,1000)
})()
alert(window.eternal)
|
Цитата:
|
Подскажите, что сделал не так?
Предыдущий код работал отлично, но я решил сделать все в объекте, теперь перестало работать, не могу понять причину :( И стоит ли так часто обращаться к this ?
var PLAYDIV = PLAYDIV || {
li : document.getElementById("lists").children,
playDiv : document.getElementById("playBar"),
speed : 10,
delay : 1300,
distance : 1,
plus : 0.5,
count : 1,
i : 0,
_getPlay: function() {
this.distance = this.distance + this.plus
this.playDiv.style.top = this.distance + "px"
if(this.distance == this.li[this.count].offsetTop)
{
var timer1 = setTimeout(arguments.callee, this.delay)
this.count ++;
}else
var timer2 = setTimeout(arguments.callee, this.speed)
if(this.count == this.li.length)
{
this.plus = 0
clearTimeout(timer1)
clearTimeout(timer2)
timer1 = null;
timer2 = null;
this.playDiv.parentNode.removeChild(this.playDiv);
}
}
};
PLAYDIV._getPlay()
|
| Часовой пояс GMT +3, время: 17:19. |