0

Помогите, пожалуйста, понять логику происходящего

var	running = false;

console.log(running + '1');

if(!running){
  running = true;

  console.log(running + '2');	

  $('#carousel_wrap').animate({
    'margin-left': '-70px'					
  }, 1000, 	function(){
    console.log(running + '3');

    running = false;
  });	

  console.log(running + '4');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="carousel_wrap" class="carousel_wrap">
  ccccc
</div>

На страничке http://jsfiddle.net/RWC4Y/ происходит анимация, переменную running я вывел в консоль 4 раза и в результате получил такой вывод:

false1
true2
true4
true3

Я не понимаю почему по завершению анимации running = false, ведь в коллбеке функции .animate() я поставил инструкцию running = false. Как я понимаю, коллбэк выполняется после того как анимация завершила свою работу.

2 ответа 2

0

Язык JavaScript - это асинхронный язык. Если разобрать по этапам ваш скрипт, то получается:

  1. running = false; в консоль выводится false1
  2. running = true; в консоль выводится true2
  3. Анимируем изменение отступа у элемента, после сразу выводим в консоль console.log(running + '4')
  4. По завершению анимации срабатывает callback, выводится сообщение в консоль: true3, переменная running изменяется на значение false.
0

Да, callback выполниться только после завершения анимации. Т.е. ваш вывод в консоль console.log(running + '4'); всегда будет срабатываться раньше, чем console.log(running + '3');, за исключением случая, когда продолжительность выполнения анимации (duration), будет равна "нулю".

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.