Как мне вызвать 3 функции, чтобы выполнять их одну за другой?

Question

Как мне вызвать 3 функции, чтобы выполнять их одну за другой?

Если мне нужно вызвать эти функции одну за другой,

$('#art1').animate({'width':'1000px'},1000);        
$('#art2').animate({'width':'1000px'},1000);        
$('#art3').animate({'width':'1000px'},1000);

Я знаю, что в jQuery я могу сделать что-то вроде:

$('#art1').animate({'width':'1000px'},1000,'linear',function(){
    $('#art2').animate({'width':'1000px'},1000,'linear',function(){
        $('#art3').animate({'width':'1000px'},1000);        
    });        
});

Но, давайте предположим, что я не использую jQuery и хочу вызвать:

some_3secs_function(some_value);        
some_5secs_function(some_value);        
some_8secs_function(some_value);

Как я должен вызвать эти функции, чтобы выполнить some_3secs_function , и ПОСЛЕ этого вызова выполнить some_5secs_function и ПОСЛЕ этого вызова, затем вызвать some_8secs_function ?

ОБНОВЛЕНИЕ:

Это все еще не работает:

(function(callback){
    $('#art1').animate({'width':'1000px'},1000);
    callback();
})((function(callback2){
    $('#art2').animate({'width':'1000px'},1000);
    callback2();
})(function(){
    $('#art3').animate({'width':'1000px'},1000);
}));

Три анимации запускаются одновременно

Где моя ошибка?

138

javascript asynchronous callback closures

задан luator 27 August 2019 в 08:08

1 ответ

Другие вопросы по тегам:

javascript asynchronous callback closures

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

score 0 · Answer 1

Если метод 1 должен быть выполнен после метода 2, 3, 4. Следующий фрагмент кода может быть решением для этого использования Задержанный объект в JavaScript.

function method1(){
  var dfd = new $.Deferred();
     setTimeout(function(){
     console.log("Inside Method - 1"); 
     method2(dfd);	 
    }, 5000);
  return dfd.promise();
}

function method2(dfd){
  setTimeout(function(){
   console.log("Inside Method - 2"); 
   method3(dfd);	
  }, 3000);
}

function method3(dfd){
  setTimeout(function(){
   console.log("Inside Method - 3"); 	
   dfd.resolve();
  }, 3000);
}

function method4(){   
   console.log("Inside Method - 4"); 	
}

var call = method1();

$.when(call).then(function(cb){
  method4();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>