0

参考下面的代码，我有一个类方法，它返回指定滑块控件行为的对象列表，以及在调整滑块以调整适当值时应用作回调的 oject 方法。这是一个对象，用于指定以下控件的绑定和参数：Pre Gain、Distortion 和 Post Gain。

DistortionPedal.prototype.getControlBindings = function(){
    return new Array({
            name: "Pre Gain",
            min: 0,
            max: 1,
            defaultValue: 0.2,
            inc: 0.05,
            setMethod: this.setPreGain.bind(this)
        }, {
            name: "Distortion",
            min: 0,
            max: 1,
            defaultValue: 0.95,
            inc: 0.05,
            setMethod: this.changeDistortion.bind(this)
        }, {
            name: "Post Gain",
            min: 0,
            max: 1,
            defaultValue: 0.5,
            inc: 0.05,
            setMethod: this.setPostGain.bind(this)
        }
    );
};

然后我有以下代码，它使用这些控件定义来构建滑块组件。

//var pedal instantiated earlier as a DistortionPedal object
var pedalControls = pedal.getControlBindings()
for(var x = 0; x < pedalControls.length; x++){
    var controlId = "control_" + id + "_" + x;
    var control = pedalControls[x];

     $("#" + id ).append(control.name + "<div id = '" + controlId + "'></div>");
     $("#" + controlId).slider({
        range: "min",
        min: control.min,
        max: control.max,
        step: control.inc,
        value: control.defaultValue,
        slide: function( event, ui ) {
            control.setMethod(ui.value); //this is where things get strange
        }
    });
}

如您所见，它创建了滑块并设置了各种参数。问题是所有滑块最终都会调用 setPostGain 作为回调函数，即使只有一个控件（列表中的最后一个）具有该回调方法。知道发生了什么吗？

更新 根据提供的答案，更新的代码是：

for(var x = 0; x < pedalControls.length; x++){
    var controlId = "control_" + id + "_" + x;
    (function(control){
         $("#" + id ).append(control.name + "<div id = '" + controlId + "'></div>");
         $("#" + controlId).slider({
            range: "min",
            min: control.min,
            max: control.max,
            step: control.inc,
            value: control.defaultValue,
            slide: function( event, ui ) {
                control.setMethod(ui.value);
            }
        });
    })(pedalControls[x]);
}
4

1 回答 1

1

您的control变量不在闭包内，因此幻灯片回调将在control调用幻灯片时获取上次存储在变量中的任何值。试试这个：

$(pedal.getControlBindings()).each(function(index) {
    var controlId = "control_" + id + "_" + index;
    var control = this;

    $("#" + id ).append(control.name + "<div id = '" + controlId + "'></div>");
    $("#" + controlId).slider({
        range: "min",
        min: control.min,
        max: control.max,
        step: control.inc,
        value: control.defaultValue,
        slide: function( event, ui ) {
            control.setMethod(ui.value); //this is where things get strange
        }
    });
});
于 2013-04-12T02:36:54.583 回答