如何将变量传递给作为函数调用参数一部分的函数？

Question

for (var i = 0; i < json.length; i++) {
    $.Mustache.load('/mustaches.php', function(i) {
         //Do Something
    });
}

在这种情况下，如何将var i传递给函数？

编辑：对不起，我实际上不想让Mustache.load调用太多次。只有一次。我该怎么做？

Answer 1

这比你想象的要复杂一些，因为你必须确保传递正确的值 i ，以便回调不使用循环结束的值。

for (var i = 0; i < json.length; i++) {
    (function(i){
        $.Mustache.load('/mustaches.php', function() {
            // use i. Call a function if necessary
            //Do Something
        });
    })(i);
}

关于回调

术语：它指的是你作为参数传递的函数，以便你调用的函数可以回调它。

要理解我写的代码，你必须

• 了解回调是在循环完成后调用的，因此当循环中的i具有循环结束的值时
• 非全局变量的作用域是定义它的函数调用。这就是为什么有这个中间函数：定义另一个变量i，该变量使用循环的值调用

Answer 2

解决您的问题的一种优雅方法是使用 bind 方法。

for (var i = 0; i < json.length; i++) {
    $.Mustache.load('/mustaches.php', function(i) {
         //Do Something
    }.bind(this, i));
}

bind 方法返回一个具有新上下文的新函数(在本例中为 this(，并将一个或多个(参数应用于您的函数(在此特定情况下i(。您可以在此处找到有关bind和currying的更多信息。

编辑。您可以通过仅加载一次模板来优化循环。事实上，$.Mustache.load 在循环的每个周期中获取/mustache.php。此外，由于该函数使用 AJAX 异步获取模板，因此模板中的排序可能不一致(一个响应可能需要比其他响应更长的时间(。修复非常简单：我们加载模板，然后循环访问。

$.get('/mustache.php').done(function(template){
  $.Mustache.add('my-template', template);
  for (var i = 0, len = json.length; i < len; ++i) {
    var rendered_template = $.Mustache.render('my-template', {
      i: i,
      ...
    });
  }
});