Обратный вызов JavaScript не работает в Chrome? - PullRequest
Новая
       9

Обратный вызов JavaScript не работает в Chrome?

0 голосов
/ 11 июля 2019

Я пытаюсь вызвать функцию ПОСЛЕ того, как другая функция завершена.Обычно это делается с помощью обратных вызовов, по крайней мере с Node.js.Однако, когда я пытаюсь запустить следующий код в Chrome, функция обратного вызова, кажется, выполняется перед основной функцией.Я неправильно пишу свою функцию / обратный вызов?Разве вторая функция (функция обратного вызова) не должна выполняться только после завершения первой?

Если обратные вызовы не работают, когда 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.

Я бы ожидал, что все будет наоборот.

Ответы [ 2 ]

2 голосов
/ 11 июля 2019

Я пытаюсь дать более простой ответ, который прямо к делу, я отредактировал ваш код, чтобы он работал так, как вы ожидаете, что он будет работать, и добавил несколько комментариев, чтобы объяснить, что происходит: 

<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 не выполняет асинхронные операции, такие как сетевые запросы

1 голос
/ 11 июля 2019

Выражения в списке аргументов вычисляются немедленно, так что выражение может быть передано в функцию.Таким образом, с 

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();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...