javascript - 如何避免幻灯片结束事件中的 javascript 关闭

Question

我有以下用于 jquery ui 滑块的代码。

var setupChartControllers = function () {
    for (var i = 0; i < 3; i++) {
        $("#chart-range-"+ i).slider({
            orientation: "vertical",
            range: true,
            values: [0, 100],
            stop: function (event, ui) {
                sliderEndFunc(event, ui, i);
            }
        });
    }
}
var sliderEndFunc = function (event, ui, chartNumber) {
    drawChart(chartNumber);
}

问题是“i”是闭包中的一个变量。到幻灯片结束事件触发时，我们得到所有事件的 i=3 值。如何将变量作为值而不是变量传递？（需要类似值类型与 oop 的引用类型）我想要 chart-range-1 触发器 drawChart(1)。

Answer 1

您可以使用 IIFE 打破关闭

stop: (function(i_local){
    return function (event, ui) { sliderEndFunc(event, ui, i_local); }
})(i);

或者，为了更有条理，您可以创建一个工厂函数，根据特定值吐出处理程序i

var setupChartControllers = function () {
    function handlerCreator(i){
        return function (event, ui) { sliderEndFunc(event, ui, i); }
    }

    for (var i = 0; i < 3; i++) {
        $("#chart-range-"+ i).slider({
            orientation: "vertical",
            range: true,
            values: [0, 100],
            stop: handlerCreator(i)
        });
    }
}