Подтвердить что ты не робот

Завершить a script 1 секунду после завершения первых скриптов

Я хочу запустить анимационную функцию после завершения другой функции (handleScreen). Функция анимации будет исчезать части страницы через 1 секунду. Я попытался добавить функцию .promise, но это не работает.

https://jsfiddle.net/Dar_T/eqdk82ru/1/

handleScreen(mql).promise().done(function() {
setTimeout(function() {
        $("#name,#splash").fadeOut("slow");
     }, 1000);
});
4b9b3361

Ответ 1

Вы можете использовать объект jquery Deferred, чтобы решить эту проблему:

handleScreen создает $.Deferred, который будет передан функции анимации. Затем возвращается обещание от этого отложенного.

function handleScreen(mql) {
    var def = $.Deferred();
    mql.matches ? smallBlock(def) : largeBlock(def);
    return def.promise();
}

Функция анимации отмечает отложенную как разрешенную после завершения анимации (используя аргумент TweenLite onComplete для последней анимации):

function largeBlock(def) {
    setTimeout(function () {
        TweenLite.defaultEase = Linear.easeNone;
        TweenLite.set('.square', { visibility: 'visible' });
        var tl = new TimelineLite();
        tl.fromTo('.l1', 2, { height: 0 }, { height: 227 });
        tl.fromTo('.l2', 3, { width: 0, }, { width: 445 });
        tl.fromTo('.l3', 2, { height: 0 }, { height: 227 });
        tl.fromTo('.l4', 3, { width: 0 }, { width: 445, onComplete: def.resolve });
        tl.timeScale(4);
    }, 600);
}

fadeOut выполняется после завершения отложенного действия:

handleScreen(mql).done(function() {
   setTimeout(function() {
            $("#name,#splash").fadeOut("slow");
        }, 1000);
   });
});

Демо: https://jsfiddle.net/g5f7pex3/1/

Ответ 2

Простой подход, который решает проблему по-другому, чем вы думали:

var alreadyFaded = false;
function FadeSplash()
{
    if(alreadyFaded == false){
       //prevent this from running a second time
       alreadyFaded = true;
       $("#name,#splash").fadeOut("slow");
    }
}

$(function () {
    //do something

    //make the fade happen upon finishing if it hasn't already
    FadeSplash();
});


$(function () {
    //by default, the fade will happen after 5 seconds if FadeSplash()
    //wasn't already called by the above function.
    $("#splash,#name").show(), setTimeout(function () {
        FadeSplash();
    }, 5000)
});

Здесь рабочий JSFiddle, чтобы продемонстрировать: https://jsfiddle.net/tthhaft1/

Ответ 3

Короткий ответ: вы не можете сделать это естественно. Длительный ответ: используйте интервал для проверки флага, также нет необходимости в двух документах:

$(document).ready(function () {
    var finished = false;
    SOME FUNCTION
    //Inside SOME FUNCTION do your stuff, and before returning or whatever it is doing:
    var intervalCheck = setInterval(function () {
        if (finished) {
            //Do your stuff you need to do after those 5 secs.
            clearInterval(intervalCheck);
        }
    }, 1000);

    $("#splash,#name").show(), setTimeout(function () {
        $("#name,#splash").fadeOut("slow")
        finished = true;
    }, 5000);
});