Question

我试图在另一个函数完成后调用一个函数。通常，这是通过回调（至少使用Node.js）完成的。但是，当我尝试在Chrome中运行以下代码时，回调函数似乎先于main函数执行。我编写的函数/回调是否写错了？第二个函数（回调函数）是否应该仅在第一个函数完成后执行？

如果当javascript在浏览器中运行客户端时回调不起作用，还有另一种方法可以确保第二个函数仅在第一个函数完成时运行吗？

<html>
<head></head>
<body>
<script>

function firstLoad(callback) {
  console.log("firstLoad function fired.");
}

function secondLoad() {
  console.log("secondLoad function fired.");
}

firstLoad(secondLoad());

</script>
</body>
</html>

在Chrome开发者工具控制台中，以上代码为我提供了

secondLoad函数被触发。

firstLoad函数被触发。

我希望情况会相反。

Answer 1

我想在这里给出一个更简单的答案，直截了当，我已经编辑了您的代码，因此它可以按照您期望的方式工作，并添加了一些注释来解释正在发生的事情：

<html>
  <head></head>
  <body>
  <script>

    function firstLoad(callback) { //secondLoad is "saved" in the callback variable
      console.log("firstLoad function fired.");

      //When Firstload is done with doing all it has to do you have to manually call 
      //the callback which references to the secondLoad function:
      callback();
    }

    function secondLoad() {
      console.log("secondLoad function fired.");
    }

    //Here you pass the secondLoad function as a parameter for the firstLoad function,
    //in your code you were passing the *result* of secondLoad
    firstLoad(secondLoad); 

  </script>
  </body>
</html>

我假设firstLoad不会执行网络请求之类的异步操作

Answer 2

立即对参数列表中的表达式求值，以便可以将表达式传递给函数。因此，

firstLoad(secondLoad());

secondLoad被调用并评估为

firstLoad(undefined);

在调用firstLoad之前。

如果firstLoad是异步的，请仅传递secondLoad函数名，并在异步操作结束时将其作为回调调用：

function firstLoad(callback) {
  console.log("firstLoad function fired.");
  setTimeout(() => {
    console.log('firstload done');
    callback();
  }, 1000);
}

function secondLoad() {
  console.log("secondLoad function fired.");
}

firstLoad(secondLoad);

您还可以让firstLoad返回承诺：

function firstLoad() {
  console.log("firstLoad function fired.");
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('firstload done');
      resolve();
    }, 1000);
  });
}

function secondLoad() {
  console.log("secondLoad function fired.");
}

firstLoad()
  .then(secondLoad);

当然，如果firstLoad不是异步的，只需在secondLoad之后调用firstLoad：

function firstLoad(callback) {
  console.log("firstLoad function fired.");
}

function secondLoad() {
  console.log("secondLoad function fired.");
}

firstLoad();
secondLoad();

Chrome浏览器中的JavaScript回调无法正常运行？

2 个答案: