Функции обратного вызова JavaScript .. в замешательстве

Question

Я уверен, что ответ на этот вопрос где-то существует, но не знаю, как сформулировать вопрос, и не могу найти то, что ищу, когда пытаюсь исследовать обратные вызовы.

Хорошо, поэтому яЯ только начал баловаться с Gulp для компиляции моего CSS, и я думаю, что это здорово! .. несмотря на то, что он бесполезен с JavaScript.

Мой код ниже, но я не понимаю, как работают эти обратные вызовы.Как обратные вызовы могут быть установлены в качестве параметра, а затем вызываться изнутри функции?Я не понимаю .. функция в основном ожидает, что что-то там будет?Какое значение устанавливается или что ожидается?Кажется, я не вижу в этом смысла.

Я часто вижу это в JavaScript, но не знаю, как это работает.Я просмотрел видео и руководства по функциям и обратным вызовам, они имеют смысл, но мне никогда не удавалось найти место, где объясняется эта концепция, и это заставляет меня поверить, что я не ищу нужную вещь.

Я вижу то же самое и с Обещаниями, где заданы параметры «разрешить» или «отклонить», но не уверены, что происходит, когда выполняется условие, или какие значения установлены и где… надеюсь, что это имеет смысл ипризнателен за любую помощь в понимании этого лучше.

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync');


// TASKS
// Compile SASS
gulp.task('sass-compile', (callback) => {
    gulp.src('scss/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('css'))
    .pipe(browserSync.stream());
    console.log('******************** SCSS > CSS successful ********************');
    callback();
});

// Live reload
gulp.task('browser-sync', (callback) => {  
    browserSync.init({
        proxy: 'http://localhost/test1',
        port: 80
    });
    callback();
});

// WATCHER
gulp.task('default', gulp.series('browser-sync', (callback) => {
    gulp.watch('scss/*.scss', gulp.series('sass-compile'));
    callback();
}));

Answer 1

В javascript функции являются объектами первого класса, что означает, что они могут быть переданы другим функциям.Есть много случаев, когда это можно использовать, но случаи, на которые вы ссылаетесь (gulp.task и new Promise), по существу используют его для двусторонней связи между вашим кодом и их кодом.Когда вы используете gulp.task, в основном выполняются следующие шаги

1) Вы вызываете gulp.task, говоря: «Я хотел бы поработать, пожалуйста».Вы передаете функцию, которая говорит, что вы хотите сделать
2) в соответствующее время, gulp.task вызывает вашу функцию, но передает ей другую функцию, говоря: «когда вы закончите, вызовите это, чтобы позволить мнезнать».

Упрощенная версия gulp.task будет выглядеть так:

const task = (name, workToDo) => {
  const done = () => {
    console.log('task', name, 'has let me know its done');
  }
  
  console.log('ive been asked to start task', name);
  setTimeout(() => {
    console.log('500ms elapsed; starting task', name);
    workToDo(done);    
  }, 500);
}

task('sample', (done) => {
 console.log('doing work');
 setTimeout(() => {
   console.log('1 second has elapsed. calling back to let it know i am done');
   done();
 }, 1000)
});

Конструктор для обещания имеет аналогичную цель.Вы говорите «Я хотел бы создать обещание, используя следующий код», а затем он вызывает ваш код, передавая две только что созданные функции (обычно называемые resolve и reject).Они используются для того, чтобы сообщить обещанию «я выполнил успешно» или «я сделал с ошибкой» и, таким образом, перевести обещание в разрешенное состояние или в отклоненное состояние.

Answer 2

Функции являются типом объекта.Объекты являются типом значения.

Значения могут храниться в переменных, в свойствах объекта и передаваться в качестве аргументов функциям.

Итак:

Вот простая функция, который называется.

function foo() {
  console.log("Foo");
}

foo();

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

function foo() {
  console.log("Foo");
}

const bar = foo;

bar();

А теперь передается в качестве аргумента другой функции.

function foo() {
  console.log("Foo");
}

function other(bar) {
    bar();
}

other(foo);

И то же самое, но с аргументами, переданными исходной функции.

function foo(baz) {
  console.log("Foo: " + baz);
}

function other(bar) {
    const arg = "Bar";
    bar(arg);
}

other(foo);

Вы только что посмотрели примеры, в которых функция, вызывающая обратный вызов, не является кодом, который вы написали (и вы не смотрите на исходный кодфункция, которая вызывает обратный вызов).