[javascript] 3 개의 함수를 차례로 호출하려면 어떻게해야합니까?

자바 스크립트에는 동기식 및 비동기식 기능이 있습니다.

동기 함수

Javascript의 대부분의 함수는 동기식입니다. 여러 개의 동기 함수를 연속해서 호출하려는 경우

doSomething();
doSomethingElse();
doSomethingUsefulThisTime();

그들은 순서대로 실행됩니다. 완료 doSomethingElse될 때까지 시작되지 않습니다 doSomething. doSomethingUsefulThisTime, doSomethingElse완료 될 때까지 시작되지 않습니다 .

비동기 함수

그러나 비동기 기능은 서로를 기다리지 않습니다. 함수가 비동기라고 가정 할 때, 위와 동일한 코드 샘플을 보자.

doSomething();
doSomethingElse();
doSomethingUsefulThisTime();

기능은 순서대로 초기화되지만 모두 동시에 실행됩니다. 어느 쪽이 먼저 끝날지 일관되게 예측할 수 없습니다. 실행하는 데 가장 짧은 시간이 걸리는 쪽이 먼저 끝납니다.

그러나 때때로 비동기식 함수가 순서대로 실행되기를 원하고 동기식 함수가 비동기식으로 실행되기를 원할 수도 있습니다. 다행히 콜백 및 타임 아웃이 각각 가능합니다.

콜백

하자 우리가 순서대로 실행하려는 것을 세 비동기 기능을 가지고 있다고 가정 some_3secs_function, some_5secs_function하고 some_8secs_function.

함수는 Javascript에서 인수로 전달 될 수 있으므로 함수가 완료된 후 실행할 콜백으로 함수를 전달할 수 있습니다.

우리가 이런 함수를 만들면

function some_3secs_function(value, callback){
  //do stuff
  callback();
}

다음과 같이 순서대로 호출 할 수 있습니다.

some_3secs_function(some_value, function() {
  some_5secs_function(other_value, function() {
    some_8secs_function(third_value, function() {
      //All three functions have completed, in order.
    });
  });
});

타임 아웃

Javascript에서는 특정 시간 초과 (밀리 초) 후에 함수가 실행되도록 지시 할 수 있습니다. 결과적으로 동기 함수가 비동기 적으로 동작하게 할 수 있습니다.

세 개의 동기 함수가있는 경우 함수를 사용하여 비동기 적으로 실행할 수 setTimeout있습니다.

setTimeout(doSomething, 10);
setTimeout(doSomethingElse, 10);
setTimeout(doSomethingUsefulThisTime, 10);

그러나 이것은 약간 추악하며 DRY 원칙 ^{[wikipedia]을} 위반합니다 . 함수 배열과 타임 아웃을 받아들이는 함수를 만들어서 약간 정리할 수 있습니다.

function executeAsynchronously(functions, timeout) {
  for(var i = 0; i < functions.length; i++) {
    setTimeout(functions[i], timeout);
  }
}

다음과 같이 호출 할 수 있습니다.

executeAsynchronously(
    [doSomething, doSomethingElse, doSomethingUsefulThisTime], 10);

요약하면, 비동기식으로 실행하려는 비동기 함수가있는 경우 콜백을 사용하고 비동기식으로 실행하려는 동기 함수가있는 경우 시간 종료를 사용하십시오.

답변

Promise.resolve($('#art1').animate({ 'width': '1000px' }, 1000).promise()).then(function(){
    return Promise.resolve($('#art2').animate({ 'width': '1000px' }, 1000).promise());
}).then(function(){
    return Promise.resolve($('#art3').animate({ 'width': '1000px' }, 1000).promise());
});

new Promise(function(fulfill, reject){
    //do something for 5 seconds
    fulfill(result);
}).then(function(result){
    return new Promise(function(fulfill, reject){
        //do something for 5 seconds
        fulfill(result);
    });
}).then(function(result){
    return new Promise(function(fulfill, reject){
        //do something for 8 seconds
        fulfill(result);
    });
}).then(function(result){
    //do something with the result
});

window.setTimeout(function() {
    alert("!");
    // set another timeout once the first completes
    window.setTimeout(function() {
        alert("!!");
    }, 1000);
}, 3000); // longer, but first

function loop() {
    var args = arguments;
    if (args.length <= 0)
        return;
    (function chain(i) {
        if (i >= args.length || typeof args[i] !== 'function')
            return;
        window.setTimeout(function() {
            args[i]();
            chain(i + 1);
        }, 2000);
    })(0);
}    

loop(
  function() { alert("sam"); },
  function() { alert("sue"); });

async.waterfall([
  // A list of functions
  function(callback){
      // Function no. 1 in sequence
      callback(null, arg);
  },
  function(arg, callback){
      // Function no. 2 in sequence
      callback(null);
  }
],
function(err, results){
   // Optional final callback will get results for all prior functions
});

function fone(callback){
...do something...
callback.apply(this,[]);

}

function ftwo(callback){
...do something...
callback.apply(this,[]);
}

fone(function(){
  ftwo(function(){
   ..ftwo done...
  })
});

asec=1000;

setTimeout('some_3secs_function("somevalue")',asec*3);
setTimeout('some_5secs_function("somevalue")',asec*5);
setTimeout('some_8secs_function("somevalue")',asec*8);