Canvas, внутренняя функция setTimeout()?

Question

[thehighhomie]

Помогите разобраться. Почему при анимации для canvas'a нужно ставить внутреннюю функцию setTimeout и потом саму эту функцию анимации в функцию setTimeout? Не могу понять почему нужно 2 раза это делать. Без внутренней функции не работает. В прикрепленном скрине видно о чем я говорю. Помогите пожалуйста разобраться, голова уже взрывается.

Answer 1

[Александр Маджугин]

Ну у вас сделано так чтобы функция выполнялась каждые 20ms.
Первый раз вызывает функцию тот таймаут который зеленым обведен. Все последующие функция выполняется и откладывает свой новый вызов на 20ms.
Фактически рекурсивный вызов с таймаутом.
Не знаю что у вас там работает или не неработает, но хочется спросить - почему бы не использовать setInterval?

Comments

[thehighhomie]

Спасибо большое) а я думал почему не работает) не ту функцию использовал для анимации) сори) только от вашего комментария косяк увидел)

[Nikolay Talanov]

В канвасе надо использовать requestAnimationFrame, а не интервалы/таймауты.

Answer 2

[Дмитрий]

Сейчас наверное лучше использовать:

window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function(/* function */ callback, /* DOMElement */ element){
                window.setTimeout(callback, 1000 / 60);
              };
    })();