Javascript-форум - Из-за цикла не работает анимация

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Из-за цикла не работает анимация (https://javascript.ru/forum/misc/19455-iz-za-cikla-ne-rabotaet-animaciya.html)

Цитата:

Сообщение от dmitriymar

по второму пункту -есть какаято существенная разница между ними?

из какого примера?

Цитата:

Сообщение от monolithed

из какого примера?

вызов анонимных функций

Цитата:

Сообщение от dmitriymar

вызов анонимных функций

кроме теории, никакой, также как и между третьей. Главное чтобы фунция была объявлена как Function Expression:

//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:

Цитата:

Сообщение от monolithed (Сообщение 117342)

Три наиболее часто используемых подхода, какой выберешь в конкретной ситуации?

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

Как говорится, вкус и цвет, товарищей нет, главное незагнаться ;)

Красава, плюсую!

Сделал следующим способом

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)

Цитата:

Сообщение от Aetae (Сообщение 118087)

(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()