jquery .animate () и .done ()

Question 1

Я пытаюсь запустить функцию после завершения анимации, но не могу заставить ее работать.

Вот мой код:

var count = 3;
var timer = setInterval(function () {
    handleTimer(count);
}, 1000);

function endCountdown() {
    $('.begin-btn').html("GO!");
}

function handleTimer() {
    if (count === 0) {
        clearInterval(timer);
        endCountdown();
    } else {
        $('.begin-btn').html(count);
        count--;
    }
}


$('.begin-mrsuper').delay(500).animate({
    "left": "4px"
}, "slow").promise().done(function (handleTimer) {});

Я пробовал и:

    $('.begin-mrsuper').delay(500).animate({"left":"4px"}, "slow").promise().done(function(){ handleTimer(); });

Но таймер 3,2,1, GO запускается до завершения анимации, есть идеи?

jquery jquery-animate

2

Speedwheelftw 21 Мар 2014 в 04:24

Answer

Оберните часть setInterval в функцию, иначе она будет выполнена после того, как вы ее вызовете.

var count = 3, timer = null;
var foo = function() {
    timer = setInterval(function () {
        handleTimer(count);
    }, 1000);
};

function endCountdown() {
    $('.begin-btn').html("GO!");
}

function handleTimer() {
    if (count === 0) {
        clearInterval(timer);
        endCountdown();
    } else {
        $('.begin-btn').html(count);
        count--;
    }
}


$('.begin-mrsuper').delay(500).animate({
    "left": "4px"
}, "slow").promise().done(foo);

1

xdazz 21 Мар 2014 в 04:29

Если я вставлю ваш код, он больше не будет работать, но я увидел, что поставил .done(function (handleTimer) {}); вместо .done(handleTimer); и теперь это работает, спасибо.

–

Speedwheelftw

21 Мар 2014 в 04:42

Хороший пост! @Маринеску Эдвард. Хорошие тесты! Аналогичный случай в отношении "заказа" jquery .done() resolve stackoverflow.com/a/22496969/2801559

–

guest271314

21 Мар 2014 в 08:00

Answer

Что-то вроде этого может сработать:

$('.begin-mrsuper').delay(500).animate({
    "left": "4px"
}, "slow", function(){ handleTimer(); }).promise();

1

gkc 21 Мар 2014 в 04:32

Question 2

Оберните часть setInterval в функцию, иначе она будет выполнена после того, как вы ее вызовете.

var count = 3, timer = null;
var foo = function() {
    timer = setInterval(function () {
        handleTimer(count);
    }, 1000);
};

function endCountdown() {
    $('.begin-btn').html("GO!");
}

function handleTimer() {
    if (count === 0) {
        clearInterval(timer);
        endCountdown();
    } else {
        $('.begin-btn').html(count);
        count--;
    }
}


$('.begin-mrsuper').delay(500).animate({
    "left": "4px"
}, "slow").promise().done(foo);

1

xdazz 21 Мар 2014 в 04:29

Если я вставлю ваш код, он больше не будет работать, но я увидел, что поставил .done(function (handleTimer) {}); вместо .done(handleTimer); и теперь это работает, спасибо.

–

Speedwheelftw

21 Мар 2014 в 04:42

Хороший пост! @Маринеску Эдвард. Хорошие тесты! Аналогичный случай в отношении "заказа" jquery .done() resolve stackoverflow.com/a/22496969/2801559

–

guest271314

21 Мар 2014 в 08:00

Question 3

Что-то вроде этого может сработать:

$('.begin-mrsuper').delay(500).animate({
    "left": "4px"
}, "slow", function(){ handleTimer(); }).promise();

1

gkc 21 Мар 2014 в 04:32

Связанные вопросы

Новые вопросы

jquery

jquery .animate () и .done ()

2 ответа

Похожие вопросы