Question

我需要逐个调用函数，其中第一个函数完成后调用第二个函数。但是这里我的问题是所有3个函数同时调用。

JAVASCRIPT代码

{{1}}

成功输出

首先调用foo（）然后调用bar（）和最后一个baz（）;

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

这是你想要的吗？

＆＃13;

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();

＆＃13;

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

你应该使用promise来进行异步调用，但是如果你只想调用一个接一个的函数，那么你可以这样做

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

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

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

请记住，这只会调用其他功能中的一个功能。它在异步函数的情况下不起作用。

如果您正在寻找异步调用，那么您必须使用下面的承诺。

 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个功能进行此操作。

Synchronuns逐个调用函数

4 个答案: