Завершить 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);
});
Ответы
Ответ 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);
});
});
Ответ 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);
});