Как выполняется обратный вызов в этой функции?

Question

const getData = (cb) => {  
  setTimeout( () => {
    cb({ data: ['there', 'is', 'stuff', 'here'] })
  }, 100)
}

getData( data => {  
  console.log(data);
});

Вот пример обратного вызова javascript.Может кто-нибудь сообщить мне, как эта функция выполняется в обратном вызове javascript?

Что это за функция внутри getData(cb)?Как это будет выполнено?Как функции передаются как обратный вызов внутри cb и возвращаются к console.log

С уважением.

Answer 1

Функция внутри getData - это обратный вызов, передаваемый в setTimeout, который является одним из способов запланировать вызов функции в будущем. В этом случае он запрашивает обратный вызов примерно через 100 мс. getData возвращается до того, как это произойдет.

Обратный вызов setTimeout является закрытием ¹ в контексте, в котором он создан, что означает, что он имеет доступ к cb даже после возврата getData. Поэтому, когда таймер браузера вызывает обратный вызов, обратный вызов может вызвать cb. Вызов cb использует литерал объекта для создания объекта для передачи cb.

При вызове getData автор передает функцию как cb, которая регистрирует полученные данные.

Итак:

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

2. getData вызывает setTimeout для планирования обратного вызова примерно через 100 мс, передавая другую функцию для вызова таймера.

3. getData возвращается.

4. Примерно через 100 мс подсистема таймера браузера инициирует вызов обратного вызова, переданного на setTimeout.

5. Этот обратный вызов создает объект и вызывает cb, передавая объект ему.

6. Этот обратный вызов (тот, что передан getData) регистрирует data объект, который он получает.

---

¹ "закрытие" & mdash; см: SO , мой анемичный блог

Answer 2

Чтобы понять код, вы можете просто упростить его, назвав анонимные функции.Одним из примеров может быть:

function logData(data) {
    console.log(data);
}

const getData = (cb) => {  
    // `cb` is `logData` function when `getData` is called
    function timeoutCallback() {
        var data = { data: ['there', 'is', 'stuff', 'here'] };
        cb(data);
    }
    setTimeout(timeoutCallback, 100)
}

getData(logData);

Имеет ли это смысл?

Answer 3

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