当lambda函数引用封闭循环中的变量时，javascript范围问题 [英] javascript scope problem when lambda function refers to a variable in enclosing loop

问题描述

第一个问题在stackoverflow :)希望我不会让自己难堪......

我有一个JavaScript函数，加载相册列表，然后创建一个列出每个专辑的项目。列表项应该是可点击的，所以我用一个函数来调用jQuery的click（）。我循环做这件事。我的问题是，所有的项目似乎都得到了相同的点击功能，尽管我尝试在每次迭代中做一个新的东西。另一种可能性是迭代变量在某种程度上是全局性的，函数是指它。下面的代码。 debug（）只是Firebug的console.debug（）的封装。

 函数processAlbumList（data，c）{
）（for data（var album））{
 var newAlbum = $（'< li class =albumLoader>'+ data [album] .title +'< / li> ; 
 var clickAlbum = function（）{
 debug（contents：+ album）; 
}; 
 debug（Album：+ album +/+ data [album] .title）; 
 $（'。albumlist'）。append（newAlbum）; 
 $（newAlbum）.click（clickAlbum）; 
 
 
  

下面是上面打印的内容函数运行，之后是由于我点击不同项目而导致的一些调试行。它总是打印10，这是专辑变量最后一个值（有10张专辑）。

0 / Live on radio.electro-music.com
专辑：1 / Doodles
专辑：2 / Misc Stuff
专辑：3 / Drawer Collection
专辑：4 / Misc Electronic东西
专辑：5 /赔率&结束
专辑：6 / Tumbler
专辑：7 / Bakelit 32
专辑：8 /电影
专辑：9 / Bakelit
专辑：10 / Slow Zoom / Atomic Heart
contents：10
contents：10
contents：10
contents：10
contents：10

有什么想法？把我推到墙上，这是。 ：）

/ Stefan

解决方案

，像这样：

  var clickAlbum =（function（a）{
 return function（）{
 debug（contents：+ a）
}; 
}）（album）; 
  

First question on stackoverflow :) Hope I won't embarrass myself...

I have a javascript function that loads a list of albums and then it creates a list item for each album. The list item should be clickable, so I call jQuery's click() with a function that does stuff. I do this in a loop. My problem is that all items seem to get the same click function, even though I try to make a new one that does different stuff in each iteration. Another possibility is that the iteration variable is global somehow, and the function refers to it. Code below. debug() is just an encapsulation of Firebug's console.debug().

function processAlbumList(data, c) {
 for (var album in data) {
  var newAlbum = $('<li class="albumLoader">' + data[album].title + '</li>').clone();
  var clickAlbum = function() {
   debug("contents: " + album);
  };
  debug("Album: " + album + "/" + data[album].title);
  $('.albumlist').append(newAlbum);
  $(newAlbum).click(clickAlbum);
 }
}

Here is a transcript of what it prints when the above function runs, after that are some debug lines caused by me clicking on different items. It always prints "10", which is the last value that the album variable takes (there are 10 albums).

Album: 0/Live on radio.electro-music.com
Album: 1/Doodles
Album: 2/Misc Stuff
Album: 3/Drawer Collection
Album: 4/Misc Electronic Stuff
Album: 5/Odds & Ends
Album: 6/Tumbler
Album: 7/Bakelit 32
Album: 8/Film
Album: 9/Bakelit
Album: 10/Slow Zoom/Atomic Heart
contents: 10
contents: 10
contents: 10
contents: 10
contents: 10

Any ideas? Driving me up the wall, this is. :)

/Stefan

解决方案

You need to introduce another scope, such as like this:

var clickAlbum = (function (a) {
    return function () {
        debug("contents: " + a)
    };
})(album);

这篇关于当lambda函数引用封闭循环中的变量时，javascript范围问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！