シンクロンンズ関数を1つずつ呼び出す

Question

ファンクションが1つずつ呼び出され、2番目の関数が呼び出された後でファースト関数が完了する必要があります。しかし、ここで私の問題は、同時に3つの関数呼び出しです。

JavaScriptコードは

function func() { 
    foo(); 
    bar(); 
    baz(); 
} 


function foo(){ 
setTimeout(function(){ console.log("foo"); }, 3000); 
    //alert("foo"); 
} 

function bar(){ 
setTimeout(function(){ console.log("bar"); }, 3000); 
//alert("bar"); 
} 

function baz(){ 
setTimeout(function(){ console.log("baz"); }, 3000); 
//alert("baz"); 
} 

func(); 

Expeted出力

まずコールのfoo（）その後、バー（）と最後のバズ（）;あなたが欲しいこれは

DEMO

Answer 1

がより良いオプションは可能性があり、そしてこのオプションはすぐに散らかっ取得しながら、あなたは、パラメータとして次の関数を渡すことができます。

このシナリオでは、括弧()に注意してください。ここで

function func() { 
 
    foo(function() { 
 
    bar(function() { 
 
     baz(); 
 
    }) 
 
    }) 
 
} 
 

 
function foo(callback) { 
 
    setTimeout(function() { 
 
    console.log("foo"); 
 
    if (callback != null) callback(); 
 
    }, 3000); 
 
} 
 

 
function bar(callback) { 
 
    setTimeout(function() { 
 
    console.log("bar"); 
 
    if (callback != null) callback(); 
 
    }, 3000); 
 
} 
 

 
function baz(callback) { 
 
    setTimeout(function() { 
 
    console.log("baz"); 
 
    if (callback != null) callback(); 
 
    }, 3000); 
 
} 
 

 
func()

Answer 2

ですか？

function func() { 
 
    foo(); 
 
} 
 

 
var timer; 
 

 
function foo() { 
 
    timer = setTimeout(function() { 
 
    console.log("foo"); 
 
    setTimeout(function() { 
 
     console.log("bar"); 
 
     setTimeout(function() { 
 
     console.log("baz"); 
 
     }, 3000); 
 
    }, 3000); 
 
    }, 3000); 
 
    //alert("foo"); 
 
    console.log('comes first'); 
 
} 
 

 

 
func();

Answer 3

別のアプローチです。ジェネレータ関数を使用します。

注：このrun機能は、awyncから取得され、簡素化されています。

const GF = function*(){}; 
 
GF.constructor.prototype.run = function(cb){ 
 
    run(this, cb); 
 
}; 
 
function run(genFunc, complete) { 
 

 
    var rootObj = genFunc(); 
 

 
    function exit(result) { 
 
     if(typeof complete === 'function'){ 
 
      complete(result, rootObj); 
 
     } 
 
    } 
 

 
    function processYieldResult(yielded, genObj, prev, next) { 
 

 
     if(yielded.done){ 
 

 
      if(genObj.cb) { 
 
       return genObj.cb(prev); 
 
      } 
 

 
      if(genObj === rootObj){ 
 
       return exit(prev); 
 
      } 
 

 
      return; 
 
     } 
 

 
     if(yielded.value instanceof Promise){ 
 
      return yielded.value.then(
 
       function (result) { 
 
        setTimeout(next, 0, result); 
 
       }, 
 
       function (err) { 
 
        if(!(err instanceof Error)){ 
 
         err = new Error(err); 
 
        } 
 
        setTimeout(next, 0, err); 
 
       } 
 
      ); 
 
     } 
 

 

 
     next(yielded.value); 
 
    } 
 

 
    function doRun(genObj, cb, prevResult) { 
 
     genObj.cb = cb; 
 
     function next(prev) { 
 

 
      if(prev instanceof Error){ 
 
       return exit(prev); 
 
      } 
 

 
      var yielded; 
 
      try{ 
 
       yielded = genObj.next(prev); 
 
      }catch (err){ 
 
       return exit(err); 
 
      } 
 

 
      processYieldResult(yielded, genObj, prev, next); 
 
     } 
 
     if(!prevResult){ 
 
      next(); 
 
     } else { 
 
      processYieldResult(prevResult, genObj, void 0, next); 
 
     } 
 
    } 
 

 
    return doRun(rootObj); 
 
} 
 

 

 

 

 
function foo(){ 
 
    return new Promise(resolve => { 
 
    setTimeout(function(){ console.log("foo"); resolve(); }, 1000); 
 
    }); 
 
} 
 

 
function bar(){ 
 
    return new Promise(resolve => { 
 
    setTimeout(function(){ console.log("bar"); resolve(); }, 1000); 
 
    }); 
 
} 
 

 
function baz(){ 
 
    return new Promise(resolve => { 
 
    setTimeout(function(){ console.log("baz"); resolve(); }, 1000); 
 
    }); 
 
} 
 

 
function *func() { 
 
    yield foo(); 
 
    yield bar(); 
 
    yield baz(); 
 
} 
 

 
func.run();

Answer 4

これが唯一の呼び出します忘れないでくださいあなたはasynchronunsコールの約束を使用する必要がありますが、あなたはちょうど別の後に関数を呼び出すしたいならば、あなたのような

function foo(){ 
    //do your stuff in foo 
    bar() 
    } 

function bar(){ 
    //do your stuff in bar 
    baz() 
    } 

function baz(){ 
    //do your stuff in baz 
    } 
foo(); 

の下に行うことができます他の機能の1つの機能。非同期関数の場合は動作しません。

非同期呼び出しを検索する場合は、以下のような約束事を使用する必要があります。

var foo = new Promise(
    function(resolve, reject) { 
     window.setTimeout(
      function() { 
       resolve('hello'); 
      }, 1000); 
    } 
); 

foo.then(
    function(val) { 
     //do your stuff 
     bar(); 
    }) 

function bar(){ 
    //do your stuff 
    } 

これはn個の機能に対して実行できます。