Как написать функцию (а), которая вызывает другую функцию (б), когда она завершается?

Question

У меня есть список входов (type = "radio"), и я запускаю анимацию при нажатии на нее, также я отключу входы во время работы анимации.

Как я могу заставить эту функцию вызывать другую, когда ее закончен запуск?

function animation(para1, para2, para3, para4) { 
    // calling a function to clear the animation for time before 
    // this gets called when a input is clicked to run a animation 
    // also hides inputs 
} 

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

Answer 1

Посмотрите Javascript callbacks.

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

Answer 2

нужна функция обратного вызова ... Это пример функции обратного вызова

$("button").click(function(){ 
    $("p").hide("slow", function(){ 
     alert("The paragraph is now hidden"); 
    }); 
}); 

Answer 3

Событие, когда заканчивается анимация CSS. А анимация CSS лучше и быстрее, чем анимация jQuery.

Вы можете написать анимацию в CSS, использовать jQuery для установки классов, которые запускают анимацию, а затем дождаться ее конца.

Посмотрите, как detect end of CSS animation

$(".button").click(function(){ 
    $(this).addClass("animate"); 
    $(this).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", 
       function(event) { 
    // Do something when the transition ends 
    }); 
}); 

Answer 4

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

function animation(para1, para2, para3, para4, callbackFn) { 
    //do the work 
    callbackFn(); //work is done, callback can be invoked now 
} 

или рассмотреть возможность использования promises, которые являются частью стандарта ES6. Если вы используете ES5 или ниже, есть библиотеки, которые могут также предоставлять обещания, например Kris Kowal's Q

Answer 5

@ Radek Pech - Спасибо, что указал мне в правильном направлении. Я не учитывал временные рамки анимации CSS, из-за чего он выглядел так, будто обратный вызов уволили раньше.