Поведение багги с использованием requestAnimationFrame

Я написал полезную библиотеку для рисования и анимации штриха SVG-маршрутов: сегмента. Вы можете check it on github.Поведение багги с использованием requestAnimationFrame

Некоторое время назад я заменил (принимая нагрузочный запрос) на setTimeout звонки с requestAnimationFrame, чтобы ускорить анимацию в современных браузерах, а также используя polyfill предоставленный Paul Irish.

Теперь я экспериментирую с ошибкой при использовании вызовов requestAnimationFrame, когда я попытался анимировать несколько paths с очень низкой задержкой между ними.

Я подготовил 2 демки, чтобы показать поведение как с setTimeout (нормально работает), так и с requestAnimationFrame (поведение багги). Проверьте пожалуйста:

В requestAnimationFrame Demo, я изменил чуток мою библиотеку, чтобы напечатать в консоли полезную информацию, где вы можете увидеть поведение багги :

(function calc(){ 
    // Checking if it's the first element, the buggy behavior happens in the firsts elements 
    if(that.class === 'first'){ 
     console.log('calc'); 
    } 

    // Some code here that can break the recursive loop and stop execution of calc function 

    if(that.class === 'first'){ 
     console.log('calc call'); 
    } 
    that.timer = window.requestAnimationFrame(calc); 

    // More code here 
})();

В соответствии с предыдущим кодом после каждого сообщения «calc call» должно появиться сообщение «calc». Но это не то, что я могу видеть, по крайней мере, в Firefox и Chrome. Это выход консоли самый раз:

calc 
calc call 
calc 
calc call

Я действительно понятия не имею, что происходит, так что любая помощь приветствуется :)

источник

2016-02-17 lmgonzalves

Я запутался. Вы говорите, что «после того, как каждый« звонок »должен получить« calc ». Но ваш код делает это наоборот. Результат выглядит корректно. –

@PaulLeBeau Извините, вы не понимаете, я попытаюсь объяснить по-другому. В консоли вы должны сначала получить «calc», пока все идеально. Позже должно появиться сообщение «calc call», и, как впоследствии вызвано к функции «calc», должно появиться другое сообщение «вызов» (первое предложение в функции «calc»). Последний вывод консоли не может быть «вызывать calc», он должен быть «calc», потому что единственный способ остановить цикл помещен там, где say '// Some code here'. Надеюсь, теперь ясно, и извините за задержку ответа. – lmgonzalves

Если вам нужно выйти из функции цикла, просто вызовите 'return'. Если 'requestAnimationFrame()' не вызывается снова, тогда цикл остановится там. –

Поведение ошибки здесь быть вызвано тем, что как стоимость timeoutID и возврат из requestAnimationFrame сохраняются в одной и той же переменной. Сохранение их в разных переменных поможет решить проблему.

Вот codepen

http://codepen.io/anon/pen/KzPboY?editors=0010

источник

2016-02-26 05:57:38 satish

Поведение багги с использованием requestAnimationFrame

ответ

Смежные вопросы