javascript - 为什么一旦将代码提取到单独的函数中，循环内的 javascript 代码就可以工作？

Question

我正在编写的 jQuery 插件中有以下代码来制作标签云。我正在传递格式为 [{tag: "028", count: 15}, {tag: "101", count: 357}] 的数据数组。我现在将云创建为跨度，根据计数对大小进行标准化。跨度创建正确，即它们具有正确的大小和文本。我添加了几个事件，单击和鼠标事件。无论单击什么跨度，它总是向我显示数组中最后一个元素的警报。

在尝试调试正在发生的事情时，我将元素创建代码提取到一个单独的函数中。一旦我这样做了，点击事件就正常工作了，即点击事件显示了被点击跨度的正确数据。

我假设这两个版本会产生相同的结果。为什么在我将元素创建提取到它自己的函数后单击事件起作用？

这是不起作用的版本:

for (var i = 0; i < tagList.length; ++i) {
    if (tagList[i] != null) {
        var tagValue = tagList[i].tag;
        var tagCount = tagList[i].count;
        var size = getNormalizedSize(tagCount);
        var theSpan = getText(tagValue, tagCount);   // <span style="font-size: {1}em">{0}<\/span>
        var theAlert = getAlert(tagValue, tagCount); // "Project {0} is has logged in {1} drawings"
        var newElement = $(theSpan);
        newElement.click(function() {
            alert(theAlert);                        // Always shows data from last element in array
        }).mouseenter(function(event) {
            $(this).css('backgroundColor', '#FFC');
        }).mouseleave(function() {
            $(this).css('backgroundColor', '#FFF');
        });
        this.append(newElement).append(" ");
    }
}

这是有效的版本:

for (var i = 0; i < tagList.length; ++i) {
    if (tagList[i] != null) {
        var tagValue = tagList[i].tag;
        var tagCount = tagList[i].count;
        var tagElem = buildElement(tagValue, tagCount);
        this.append(tagElem).append(" ");
    }
}

function buildElement(tagValue, tagCount) {
    var size = getNormalizedSize(tagCount);
    var theSpan = getText(tagValue, tagCount);   // <span style="font-size: {1}em">{0}<\/span>
    var theAlert = getAlert(tagValue, tagCount); // "Project {0} is has logged in {1} drawings"
    var newElement = $(theSpan);
    newElement.click(function() {
        alert(theAlert);
    }).mouseenter(function(event) {
        $(this).css('backgroundColor', '#FFC');
    }).mouseleave(function() {
        $(this).css('backgroundColor', '#FFF');
    });
    return newElement;
}

Answer 1

您在每个处理程序中捕获相同的变量，范围限定为循环。然后，当调用处理程序时，它包含分配给它的最后一个值。当您将它移动到一个函数时，该变量的范围限定为该函数调用的实例，因此它对于循环的每次迭代都是不同的，并且具有在该迭代期间分配的值。