Javascript函数作为另一个函数的参数？

Question

这些天我学习了很多 javascript，我不太了解的一件事是将函数作为参数传递给其他函数。我得到了做这些事情的概念，但我自己无法想出任何理想的情况。

我的问题是:

您希望什么时候让您的 javascript 函数将另一个函数作为参数？为什么不直接为该函数的返回值分配一个变量并将该变量传递给函数，如下所示:

// Why not do this
var foo = doStuff(params);
callerFunction(foo);

//instead of this
callerFunction(doStuff);

我很困惑为什么我会选择像我的第二个例子那样做事情。

你为什么要这样做？有哪些用例？

谢谢!!

Answer 1

有几个用例:

1。 “包装器”函数。

假设您有一堆不同的代码。在每一段代码之前和之后，您想做一些其他事情(例如:记录或尝试/捕获异常)。

您可以编写一个“Wrapper”函数来处理这个问题。例如:

function putYourHeadInTheSand(otherFunc) {
    try{
         otherFunc();
    } catch(e) { } // ignore the error
}

....

putYourHeadInTheSand(function(){
    // do something here
});
putYourHeadInTheSand(function(){
    // do something else
});

2。回调。

假设您以某种方式加载了一些数据。无需锁定系统等待加载，您可以在后台加载它，并在结果到达时对其进行处理。

现在你怎么知道它什么时候到达？您可以使用信号或互斥量之类的东西，它们很难编写且很难看，或者您可以只创建一个回调函数。您可以将此回调传递给 Loader 函数，该函数可以在完成时调用它。

每次执行 XmlHttpRequest 时，几乎都会发生这种情况。这是一个例子。

function loadStuff(callback) {
    // Go off and make an XHR or a web worker or somehow generate some data
    var data = ...;
    callback(data);
}

loadStuff(function(data){
    alert('Now we have the data');
});

3。生成器/迭代器

这类似于回调，但您可以多次调用它，而不是只调用一次回调。想象一下，您的加载数据函数不只是加载一位数据，可能会加载 200 位数据。

这最终与 for/foreach 循环非常相似，只是它是异步的。 (您无需等待数据，它会在准备就绪时调用您)。

function forEachData(callback) {
    // generate some data in the background with an XHR or web worker
    callback(data1);
    // generate some more data in the background with an XHR or web worker
    callback(data2);
    //... etc
}

forEachData(function(data){
    alert('Now we have the data'); // this will happen 2 times with different data each time
});

4。延迟加载

假设您的函数对某些文本执行某些操作。但它可能只需要五分之一的文本，而且文本的加载成本可能非常高。

所以代码是这样的

var text = "dsakjlfdsafds"; // imagine we had to calculate lots of expensive things to get this.
var result = processingFunction(text);

处理函数实际上只有 20% 的时间需要文本!我们浪费了所有的努力来加载那些额外的时间。

您可以传递生成文本的函数，而不是传递文本，如下所示:

var textLoader = function(){ return "dsakjlfdsafds"; }// imagine we had to calculate lots of expensive things to get this.
var result = processingFunction(textLoader);

您必须更改您的 processingFunction 才能期待另一个函数而不是文本，但这真的很小。现在发生的情况是 processingFunction 只会在需要它的 20% 的时间调用 textLoader。其他 80% 的时间，它不会调用该函数，您不会浪费所有的努力。

4a。缓存

如果发生了延迟加载，那么 textLoader 函数可以在获取结果文本后私下将其存储在变量中。第二次有人调用 textLoader 时，它可以只返回该变量并避免昂贵的计算工作。

调用 textLoader 的代码不知道也不关心数据是否被缓存，它显然更快。

通过传递函数，您可以做很多更高级的事情，这只是触及表面，但希望它能为您指明正确的方向:-)