代码之家 › 专栏 › 技术社区 › chrsmrtn81

JavaScript回调函数。。困惑的

gulp callback function javascript

chrsmrtn81 · 技术社区 · 7 年前

我确信这个问题的答案存在于某个地方,但不确定如何表达这个问题,并且在我尝试研究回调时没有找到我想要的。

好的,我刚刚开始尝试Gulp来编译我的CSS,我觉得它很棒!。。尽管无法使用JavaScript。

我的代码如下,但我不理解这些回调是如何工作的。如何将回调设置为参数,然后从函数内部调用?我不明白。。函数是否基本上期望其中包含一些内容?正在设置什么值或预期运行什么?我似乎弄不懂。

我在JavaScript中经常看到这种情况,但不确定它是如何工作的。我查阅了函数和回调的视频和教程,它们很有意义,但我似乎从来没有找到任何地方解释过这个概念,这让我觉得我找的不是正确的东西。

我在承诺中也看到了同样的情况,其中设置了“resolve”或“reject”参数,但不确定满足条件时会发生什么,或者设置了什么值以及在哪里。。希望这是有意义的,并感谢任何帮助更好地理解这一点。

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();
}));

2 回复 | 直到 7 年前

Scott Lee 5 年前

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

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

other(foo);

我可以看出这在执行异步任务时是多么有用。但这完全违反直觉,我可以立即看到潜在的类型错误。

后来,我改变了我的编码风格,尽可能多地使用异步/等待。但浏览遗留代码仍然是一件痛苦的事。因此,我最终查找此线程的原因。哈哈

-1

Quentin 7 年前

函数是一种对象。对象是一种值。

值可以存储在变量、对象属性中,并作为参数传递给函数。

因此:

这是一个简单的函数,称为。

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);

您刚才看到的示例中,负责调用回调的函数不是您编写的代码(并且您没有看到调用回调的函数的源代码)。

-1

Nicholas Tower 7 年前

在javascript中,函数是第一类对象,这意味着它们可以传递给其他函数。有许多情况下可以使用它,但您所指的情况(gulp.task和new Promise)本质上是使用它在代码和它们的代码之间进行双向通信。当你大口喝的时候。任务,基本上执行以下步骤

1) 你叫gulp。任务,说“我想做一些工作请”。你传入一个函数,表示你想做什么
2) 在适当的时候,大口吞下。task调用您的函数,但将另一个函数传递给它,表示“完成后,请调用此函数让我知道”。

gulp的简化版本。任务如下所示:

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)
});

承诺的构造函数具有类似的目的。你说“我想用下面的代码创建一个promise”,然后它调用你的代码传递它刚刚创建的两个函数(通常称为 resolve 和 reject ). 这些用于告诉承诺“我成功完成了”或“我有错误完成了”,从而将承诺转移到已解决状态或已拒绝状态。