Почему сценарий, встроенный в обратный вызов, запускается первым в этом примере?

Question

Я хотел бы понять, почему в этом случае c появляется всплывающее предупреждение для script2? Если я раскомментирую setTimeout в объявлении базовой функции, script1 сначала выдаст предупреждение. Я ожидал, что с или без setTimeout, внутри базовой функции, script1 будет предупреждать первым. Разъясняющий ответ был бы очень признателен.

function base(src, cb) {
  //setTimeout(() => {
  cb();
  alert(src + ' finished executing')
  //}, 100)
}

function first() {
  setTimeout(() => {
    alert('first');
  }, 110)
}

function second() {
  setTimeout(() => {
    alert('second');
  }, 110);
}

base('script 1', () => {
  first();
  base('script 2', () => {
    second();
  });
})

Answer 1

Функция first () выполняется перед second (), но предупреждение генерируется после выполнения обоих, потому что вы инкапсулировали оба в метод обратного вызова. И предупреждение генерируется после завершения всей функции. Может быть, вы должны написать свой код следующим образом, чтобы понять, что происходит.

function base(src, cb) {
  //setTimeout(() => {
  cb();
  alert(src + ' finished executing')
  //}, 100)
}

function first() {
  setTimeout(() => {
    alert('first');
  }, 110)
}

function second() {
  setTimeout(() => {
    alert('second');
  }, 110);
}

base('script 1 and script 2', () => {
  base('script 1', () => {
    first();
  });
  base('script 2', () => {
    second();
  });
})

Answer 2

Ваш код вызывает функцию base(), передавая функцию, которая также вызывает base(). Таким образом, «вторая» функция завершается первой, потому что вложенный вызов base() вызывает ее до того, как отправляет alert() для «первой» функции.

Используйте console.log() вместо alert().