在继续之前等待一个函数完成的正确方法？

Question

我有两个JS函数。一个叫另一个。在调用函数中，我想调用另一个函数，等待该函数完成，然后继续。例如，伪代码：

function firstFunction(){
    for(i=0;i<x;i++){
        // do something
    }
};

function secondFunction(){
    firstFunction()
    // now wait for firstFunction to finish...
    // do something else
};

我想出了这个解决方案，但不知道这是否是一个明智的方法。

var isPaused = false;

function firstFunction(){
    isPaused = true;
    for(i=0;i<x;i++){
        // do something
    }
    isPaused = false;
};

function secondFunction(){
    firstFunction()
    function waitForIt(){
        if (isPaused) {
            setTimeout(function(){waitForIt()},100);
        } else {
            // go do that thing
        };
    }
};

这合法吗？有没有更优雅的处理方法？也许用jQuery？

Answer 1

等待一个函数首先完成的一个优雅方法是使用带有async/wait函数的Promises。

1. 首先，做出promise。我创建的功能将在2秒后完成。我使用了setTimeout来演示执行指令需要一些时间的情况

例：

js lang-js prettyprint-override">    //1. Create a new function that returns a promise
    function firstFunction() {
      return new Promise((resolve, reject) => {
          let y = 0
          setTimeout(() => {
            for (i=0; i<10; i++) {
               y++
            }
             console.log('Loop completed.')  
             resolve(y)
          }, 2000)
      })
    }
    
    //2. Create an async function
    async function secondFunction() {
        console.log('Before promise call.')
        //3. Await for the first function to complete
        const result = await firstFunction()
        console.log('Promise resolved: ' + result)
        console.log('Next step.')
    }; 

    secondFunction()

Answer 2

使用异步/等待：

async function firstFunction(){
  for(i=0;i<x;i++){
    // do something
  }
  return;
};

然后在其他函数中使用wait等待返回：

async function secondFunction(){
  await firstFunction();
  // now wait for firstFunction to finish...
  // do something else
};

Answer 3

处理此类异步工作的一种方法是使用回调函数，例如：

function firstFunction(_callback){
    // do some asynchronous work
    // and when the asynchronous stuff is complete
    _callback();    
}

function secondFunction(){
    // call first function and pass in a callback function which
    // first function runs when it has completed
    firstFunction(function() {
        console.log('huzzah, I\'m done!');
    });    
}

根据@Janaka Pushbagumara的建议，您现在可以使用箭头函数来实现同样的事情。例如：

firstFunction（（）=

更新：我很久以前就回答过这个问题，并且真的很想更新它。虽然回调绝对没问题，但根据我的经验，它们往往会导致代码更难阅读和维护。不过，在某些情况下，我仍然使用它们，比如将进度事件等作为参数传递。这次更新只是为了强调替代方案。

另外，最初的问题没有具体提到异步，所以如果有人混淆了，如果你的函数是同步的，它会在调用时阻塞。例如：

doSomething()
// the function below will wait until doSomething completes if it is synchronous
doSomethingElse()

如果像暗示的那样函数是异步的，那么我今天处理所有异步工作的方法是使用async/wait。例如：

const secondFunction = async () => {
  const result = await firstFunction()
  // do something else here after firstFunction completes
}

在我看来，async/await使您的代码比直接使用promise（大多数情况下）更具可读性。如果您需要处理捕获错误，请将其与try/catch一起使用。请在此处阅读更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function .