for 中的 Javascript 动态事件

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 6 年前。

我有一些 JavaScript 代码，该代码循环抛出一个列表，并为每个元素创建一个 slider 。其次，它需要一个事件处理程序，因此当更改 slider 时，它会将值写入输入。

当 for 第一次运行时，一切正常，输入获取值，但是当我手动更改 slider 时，它会抛出错误:

Uncaught TypeError: Cannot read property 'maxValue' of undefined

代码:

for (i = 0; i < sliders.length; i++)
{
    noUiSlider.create(sliders[i].object[0], {
        start: sliders[i].start,
        step: 1,
        connect: true,
        range: sliders[i].range
    });
    sliders[i].object[0].noUiSlider.on('update', function( values, handle ) {
        if ( handle ) {
            console.debug(sliders[i]);
            sliders[i].maxValue.val(Math.floor(values[handle]));
        } else {
            sliders[i].minValue.val(Math.floor(values[handle]));
        }
    });
}

在 slider 变量中我有这个:

var sliders = [
            {
                "object": $('#number-of-passangers'),
                "start": [4, 6],
                "range": {
                    "min": 2,
                    "max": 15
                },
                "minValue": $("#min-passanger"),
                "maxValue": $("#max-passanger")
            },
            {
                "object": $('#cost-per-day'),
                "start": [3500, 65000],
                "range": {
                    "min": 3500,
                    "max": 65000
                },
                "minValue": $("#min-cost"),
                "maxValue": $("#max-cost")
            },
        ]

Answer 1

那是因为i是循环的索引，每次迭代后都会递增。增量前i < sliders.length被评估，如果为真，则执行循环体。这意味着，循环结束后i == sliders.length ，所以sliders[i]未定义。 i驻留在事件处理程序的外部范围内，因此它的值对于每个事件处理程序都是相同的。您需要保存它的本地副本，例如:

.on('click', (function (idx) {
    return function (values, handle) {
        /* use idx here, instead of i*/ 
    }
 })(i));

综上所述，您的问题是由范围引起的。如果您考虑:

function make () {
    for (var i = 0, result = []; i < 10; i++) {
        result.push(function fxi () { console.log(i); });
    }
    return result;
}

make().forEach(function (fxi) { fxi () }) // logs 10 time »10«

那是因为i定义在make()范围内如果内部函数之一 fxi被调用， i 的定义搜索，在fxi范围内没有找到，因此搜索会在下一个级别继续进行，make()这次，找到了，所以它的值就从那里获取。但由于循环已递增 i运行时最多 10 个，现在每个值都是 10 fxi .

Fiddle