javascript - 在 Javascript 的内联函数中将参数作为值传递

Question

当我点击 Javascript/jQuery 中的链接时，我试图让我的页面幻灯片滚动，但我无法弄清楚如何将我的 for 循环的当前增量值传递为for 中的一个参数，用于绑定(bind)我的链接上的点击事件。当我单击时，它会调用我定义的函数，但使用的是我的 i 的当前值，而不是函数定义时的值...这是我的一些代码:

temp[0] = 0;
for(var i = 1; i < 8; i++) {
  temp[i] = defaultPositions["slide" + i].top;
  console.log(defaultPositions["slide" + i].top);
  $('a.slide' + i).bind('click', function() {
    $('html, body').animate({scrollTop:(defaultPositions['slide' + i].top / slidesScrollSpeed)}, 1000, function() {
      parallaxScroll();
    });
    return false;
  });
}

我如何传递 i 值，以便当我点击一个链接时，每个链接都有预期的值，而不是全部都是 slide8？

Answer 1

总结:

for (var i=1;i<8;++i){
  (function(i){
    // Your code using `i` in callbacks here
  })(i);
}

你的问题是有一个变量 i 在你所有的闭包中共享(为 click 处理程序创建的匿名函数，所有这些都“关闭”了在函数外部声明的 i 的值)，因此当该变量的值在循环中递增时，所有函数仍引用相同的更新值。

通过将循环主体包装在一个传入值 i 的函数中，您将获得一个新、不同的变量 i 每次迭代都会关闭您的功能。为了更清楚地说明发生了什么，您也可以将其写为:

for (var i=1;i<8;++i){
  (function(slideNum){
    // Your code using `slideNum` in callbacks here
  })(i);
}

或者，您可以为闭包创建自定义变量，如下所示:

for (var i=1;i<8;i++){
  var slideNum = 'slide'+i; // Create a new variable to use in the closure
  temp[i] = defaultPositions[slideNum].top;
  $('a.slide'+i).bind('click', function() {
    $('html, body').animate({
      scrollTop:(defaultPositions[slideNum].top/slidesScrollSpeed)
    }, 1000, function() { parallaxScroll(); });
    return false;
  });
}

另外，请注意，根据 parallaxScroll() 的实现，您可以简化该行:

$('html, body').animate({
  scrollTop:(defaultPositions[slideNum].top/slidesScrollSpeed)
}, 1000, parallaxScroll );