Последовательно ли идет выполнение скрипта или параллельно?

Question

[YourQuestion]

$(".block").css('transition','all 59.0s ease 0s');
setTimeout(function() {
  alert('hello');
}, 59000);

В таком коде 59 секунд пройдут после 59 секунд, потраченных на вращение блока $(".block") или всего уйдет 59 секунд на две операции ?

Answer 1

[Александр Борисович]

анимация стилей одно, таймер скрипта - другое.
Вы просто задаете стиль браузеру и все, дальше он с им работает. Пойдет параллельно у вас все.

Лучше так:
stackoverflow.com/questions/9255279/callback-when-...

Comments

[YourQuestion]

спасибо, а то уже возникли сомнения среди ночи)

[Александр Борисович]

но у вас изврат) вешайте на колбек алерт
stackoverflow.com/questions/9255279/callback-when-...

[YourQuestion]

@Alexufo: спасибо, я как раз подумал почему не проверил состояние перед событием =)

Answer 2

[deleted-tnorman]

function afterTransition(func, delay){
    $(".block").css('transition','all '+delay+'ms ease 0s');
    setTimeout(function() {
            func();
    }, delay);
}

afterTransition(function(){
    alert('hello');
}, 59000);

Но мне совершенно не нравится то, как вы пытаетесь воспользоваться cssТранзишном.

Обратите внимание на jQuery animate
У него гораздо удобнее работа с последовательностью
Фактически там можно использовать цепные вызовы

$('selector').animate({top: 0}, 1000)
.animate({top: 100}, 1000)
.animate({top: 0}, 1000)
.animate({top: 100}, 1000)
.animate({top: 0}, 1000)
.animate({top: 100}, 1000);

и так до бесконечности.

А так же колбек и все дела

$('selector').animate({
top: 0
}, 1000, function(){
// функция сработает по завершению анимации
// в вашем случае тут можно вывести алерт
});