Вызов функции из другого только после того, как он закончил

Question

, желающий вызвать вторую функцию после завершения последовательности отсроченных затуханий в 1-й.

У меня есть 2 функции «firstTime» и «loopTime», как показано ниже, но только для того, чтобы «loopTime» запускался после завершения «firstTime».

Andy совет по получению этой работы? например «loopTime» следует вызывать после того, как последнее затухающее затухание в «firstTime» будет завершено - тогда «loopTime» должен воспроизводить его последовательность и цикл навсегда ...

Возможно?

function firstTime(callback) { 

alert("firstTime") 
$(".card h1").delay(5000).fadeIn(3500); 
$(".card h1").delay(5000).fadeOut(3500); 
$(".card h2").delay(17000).fadeIn(3500); 
$(".card h2").delay(5000).fadeOut(3500); 

return true; 
} 

function loopTime() { 

alert("loopTime") 
$(".card h1").fadeIn(3500); 
$(".card h1").delay(5000).fadeOut(3500); 
$(".card h2").delay(12000).fadeIn(3500); 
$(".card h2").delay(5000).fadeOut(3500);  

} 

firstTime(function() { 
    loopTime(); 
}); 

Answer 1

Обратите внимание, что вы можете связать свои анимации, если они предназначены для одного и того же элемента. Нет необходимости в отдельных линиях.

Используйте обратные вызовы в качестве второго параметров до последнего хода (длинный бег) анимации:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/cL50uh1x/2/

function firstTime(callback) { 
    $(".card h1").delay(5000).fadeIn(3500).delay(5000).fadeOut(3500); 
    $(".card h2").delay(17000).fadeIn(3500).delay(5000).fadeOut(3500, callback); 
} 

function loopTime() { 
    $(".card h1").fadeIn(3500).delay(5000).fadeOut(3500); 
    $(".card h2").delay(12000).fadeIn(3500).delay(5000).fadeOut(3500, loopTime); 
} 

firstTime(loopTime); 

Для loopTime, он просто называет себя, когда последняя анимация заканчивается. Поскольку для ваших функций нет параметров, просто ссылайтесь на них, не вызывая их (нет необходимости в анонимных оболочках). Это даже относится к первому звонку в firstTime :)

Answer 2

Очевидно, что один, что займет больше времени, это

$(".card h2").delay(17000).fadeIn(3500); 

Таким образом, вы можете сделать это

$(".card h2").delay(17000).fadeIn(3500,callback); 

из документации JQuery FadeIn вы можете передать в качестве второго параметра функцию для позвоните, если он будет заполнен

http://api.jquery.com/fadein/

и сделать его петлю второй вы можете использовать SetTimer

firstTime(function() { 
//Every 2 seconds 
    setInterval(function() {loopTime();}, 20000); 
}); 

http://www.w3schools.com/js/js_timing.asp

Answer 3

В fadeIn и fadeOut вам нужно добавить функцию обратного вызова в качестве второго параметра. Official documentation. Для обхвата части вы можете посмотреть в setInterval(), here is the doc

function firstTime(callback) { 

alert("firstTime") 
$(".card h1").delay(5000).fadeIn(3500); 
$(".card h1").delay(5000).fadeOut(3500); 

// this call could be use to trigger the second function since it is the last completed call 
$(".card h2").delay(17000).fadeIn(3500, function(){ setinterval(function() { loopTime() }, 100) }); 

$(".card h2").delay(5000).fadeOut(3500); 

return true; 
} 

Другим решением, вы можете рассмотреть используют функциональный реактивный плагин. Существует bacon.js