шаблон обратного вызова javascript на простом примере

Question

Мне не удалось найти простой пример шаблона обратного вызова javascript для моей цели, и ответ на следующий вопрос был бы очень полезен.

Предположим, у меня есть 2 функции, каждая из которых отображает предупреждение:

function hello1() {
 setTimeout(function(){
    alert("hello1");
   }, 500); 
  } 

function hello2() {
 alert("hello2");
  }

, если я использую эту функцию,

function saythehellos()
{
hello1();
hello2();
}

предупреждение "hello2" будетсначала отображается сообщение с последующим предупреждением «hello1»

Как изменить функцию saythehellos() с помощью шаблона обратного вызова, чтобы сначала отображалось предупреждение «hello1», а затем предупреждение «hello2»?

Answer 1

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

function hello1(callback) {
  setTimeout(function(){
    alert("hello1");
    callback();
  }, 500); 
} 

function hello2() {
  alert("hello2");
}

hello1(hello2);

В ES6 специальный синтаксис для более удобной работы с обещаниями, который называется async/await. Это удивительно легко понять и использовать. Вы также можете использовать его. За сценой async/await работает как callback

Отредактировано согласно запросу:

Вы можете сделать это с помощью third function(saythehellos) согласно следующей цепочке.

function hello1(callback) {
  
 setTimeout(function(){
    alert("hello1");
    callback();
  }, 500); 
}

function hello2(callback) {
   alert("hello2");
   callback();
}

function saythehellos(callback) {
    hello1(function() {
        hello2(function() {
            callback();
        });
    });
}

saythehellos(function(){alert('all done')});

Answer 2

Простой способ обратного вызова:

function hello1(hello2Callback) {
   alert("hello1");
   hello2Callback && hello2Callback();
}

hello1(function() {
  alert("hello2");
});

Надеюсь, это поможет вам. Функция обратного вызова - это функция, которая передается в качестве аргумента. Поэтому при вызове hello1 () я передаю полное определение функции. Этот аргумент называется функцией обратного вызова.

Обещание - это новый эффективный и чистый способ обработки обратных вызовов. Вы можете проверить Javascript Promise через Google.

Answer 3

Вы можете использовать синтаксис ES7 async/await с обещанием .В вашем методе hello1() вы можете вернуть обещание, которое будет alert(), а затем resolve, чтобы указать, что ваш метод hello1 завершен.Затем saythehellos() будет ждать от hello1() до resolve (поскольку мы используем ключевое слово await), а затем он продолжит выполнение hello2():

function hello1() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      alert("hello1");
      resolve();
    }, 500);
  });

}

function hello2() {
  alert("hello2");
}


async function saythehellos() { // make async as we want to use await within this method
  await hello1();
  hello2();
}

saythehellos();

В качестве альтернативы, если вы ищете что-то более совместимое с браузером, вы можете использовать обратный вызов .then для возвращенного обещания от hello1() (что по сутичто async/await делает под капотом).Обратный вызов .then будет запущен, когда возвращенный promise разрешится:

function hello1() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      alert("hello1");
      resolve();
    }, 500);
  });

}

function hello2() {
  alert("hello2");
}


function saythehellos() {
  hello1().then(function(result) {
    hello2();
  });
}

saythehellos();

Answer 4

Простой подход для достижения этой цели:

function Hello1(){
   setTimeOut(onTimeOutRaise,500)
}

function onTimeOutRaise(){
  alert("Hello1");
  Hello2();
}
function Hello2(){
 alert("Hello2")
}

Здесь " onTimeOutRaise " сам по себе обратный вызов.