Почему колбек срабатывает раньше, чем надо?

Question

[JackShcherbakov]

Написал код https://codepen.io/CitizenOne/pen/qxZmoP
Я пытаюсь сделать так, что бы колбек выполнялся всегда после основного кода функции. Колбек должен как бы ждать.
Что я делаю не так? Я же как и во всех статьях на эту тему передаю функцию в качестве аргумента.

Answer 1

[Александр]

Колбек должен как бы ждать.

С чего вы решили, что callback должен ждать?

В вашем случае надо или так:

function callBack(func2){
  setTimeout(function(){
     console.log(1); 
     func2();
  }, 500);
}
callBack(function(){
  console.log(2);
});

Или так:

function callBack(func2){
  console.log(1); 
  func2();
}
callBack(function(){
  console.log(2);
});

Comments

[JackShcherbakov]

Ну так а что делать если я не знаю когда именно выполнется console log 1? Как сдеалть четкую очередь console.logов? В Вашем случае мы знаем когда выполнится console.log(1).

[Александр]

Ну так а что делать если я не знаю когда именно выполнется console log 1?

Никак. Вам в любой реализации, после console.log(1), нужно будет либо вызывать callback, либо резолвить Promise, либо диспатчить event.

[JackShcherbakov]

Minifets, Получается сделать очередь из функций, в которой одна функция выполнится только после выполнения другой, нельзя в es5?

[Александр]

JackShcherbakov, очередь можно, и я выше показал как это сделать. Нельзя только для этой фразы:

Ну так а что делать если я не знаю когда именно выполнется console log 1? Как сдеалть четкую очередь console.logов? В Вашем случае мы знаем когда выполнится console.log(1).

Все варианты ничем принципиально не отличаются. Вариант с Promise вам дали ниже. Тут приведу варианты с callback-ом и dispatchEvent.

Как делать с callback-ом:

function func1(callback) {
    setTimeout(function () {
        console.log(1);
        callback();
    }, 500);
}

func1(function () {
    console.log(2);
});

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

Через dispatchEvent:

document.addEventListener('customEvent', function () {
    console.log(2);
});

function func1() {
    setTimeout(function () {
        console.log(1);
        document.dispatchEvent(new Event('customEvent'));
    }, 500);
}

func1();

Функция 1 кидает кастомный ивент. На этот ивент можно повесить слушателя - функция 2

[JackShcherbakov]

Minifets, Я возможно Вас просто непонимаю в силу своей непрофессиональности, но в Вашем коде нам известно когда выполнится console.log(1), а в моем случае неизвестно, в Вашем коде функция с console.log(2) выполнится ровно через 500мс, но что делать, если console.log(1) выполняется 5 минут (например, ждет все функции до него, а их может быть сотни)? Вот в чем состоит проблема.

[Александр]

JackShcherbakov, в моем коде console.log(2) выполнится сразу после console.log(1), а не через 500мс. Исключение может быть, если вместо console.log(1), будет другая функция внутри которой другой setTimeout. В таком случае она также должна принимать callback, и мы его передаем дальше в нее.

function count(number, callback) {
    setTimeout(function () {
        console.log(number);
        callback();
    }, 500)
}

function start(callback) {
    setTimeout(function () {
        console.log('Давай посчитаем');
        count(3, function () {
            count(2, function () {
                count(1, callback)
            });
        });
    }, 500);
}

start(function () {
    console.log('Закончили.')
});

Тут слово "Закончили" всегда будет последним.

Answer 2

[Rsa97]

А в чём проблема, всё работает именно так, как вы задали.
Функция callBack устанавливает таймер и вызывает функцию, переданную ей в качестве параметра, выводится 2. Через 500 миллисекунд вызывается функция, переданная в таймаут, выводится 1.

Comments

[JackShcherbakov]

Ну так а что делать если я не знаю когда именно выполнется console log 1? Как сдеалть четкую очередь console.logов? В Вашем случае мы знаем когда выполнится console.log(1).

Answer 3

[lavezzi1]

Предполагаю вы хотели сделать что то подобное: https://jsfiddle.net/w2md0h6j/2/

Comments

[JackShcherbakov]

Да, я хотел сделать что-то подобное. Но на es5. А в Вашем коде фигурирует es6. В этом то и проблема. Я знаю как это сделать на промисах, но увы, нельзя.

[lavezzi1]

JackShcherbakov, есть "легкие" полифилы промисов.

[Александр]

lavezzi1, JackShcherbakov, ну да, проще будет поставить babel и не париться.