javascript - 将变量传递给命名回调

Question

好吧，让我们保持简单，我有以下内容:

function loopDaLoop(){
    for (var i = 0; i < tempItemsLength; i++) {
        var product = tempItems[i];
        dust.render('product', product, addProductOrFinish);
    }
}

我想在回调函数中获取 i 的当前值

function addProductOrFinish(err, out) {
   console.log(i); // undefined
}

我知道这很简单，我真的知道...帮忙吗？

编辑:我知道我应该使用闭包，所以我尝试了但失败了:

(function(i){
    dust.render('product', product, addProductOrFinish);
};(i)

Answer 1

有几种不同的结构可以用来解决这个问题。最简单的是使用 .bind() 将所需的参数添加到函数调用中。

function loopDaLoop(){
    for (var i = 0; i < tempItemsLength; i++) {
        var product = tempItems[i];
        dust.render('product', product, addProductOrFinish.bind(null, i));
    }
}

function addProductOrFinish(i, err, out) {
   console.log(i);
}

如果这很重要，这将导致 addProductOrFinish 中 this 的值发生变化。如果是这样，您也可以解决这个问题，但事情没那么简单。

<小时/>

这是另一种使用闭包的方法，该闭包返回一个函数并保留 this 的值，以防 dust.render() 设置:

function loopDaLoop(){
    for (var i = 0; i < tempItemsLength; i++) {
        var product = tempItems[i];
        dust.render('product', product, getAddProductOrFinish(i));
    }
}

function getAddProductOrFinish(loopArg) {
     return function(err, out) {
         return addProductOrFinish.call(this, loopArg, err, out);
     }
}

function addProductOrFinish(i, err, out) {
   console.log(i);
}

<小时/>

或者，如果 addProductOrFinish 可以是内联函数，那么它可以使用您尝试过的 IIFE 类型结构，如下所示:

function loopDaLoop(){
    for (var i = 0; i < tempItemsLength; i++) {
        var product = tempItems[i];
        (function(i) {
            dust.render('product', product, function(err, out) {
                console.log(i);
                // rest of your addProductOrFinish logic here
            });
        )(i);
    }
}