javascript - JQuery UI 响应式(Reactive) slider (在 slider 更改时同时更新多个 slider )

Question

我正在尝试在 JQuery UI 中的 slider 的 slide 和 change 事件上同时更新多个 slider 。

我有如下代码:

$(function() {
    var totalSliders = 0;
    $(".slider").each(function() {
        var value = parseInt($(this).text(), 10);
        $(this).empty().slider({
            value: value,
            range: "min",
            animate: true,
            orientation: "horizontal",
            slide: updateSliders,
            change: updateSliders
        });
        totalSliders++;
    });

    function updateSliders(event, ui) {
        var activeSlider = this;
        $(".slider").slider("value", $(activeSlider).slider("value"));
    };

    $("#update").click(function() {
        $(".slider").slider("value", 10);
        return false;
    });
});

这成功地将所有具有 slider 类的东西都变成了 slider 。但是，每当我移动 slider 时，都会出现以下错误:

Uncaught RangeError: Maximum call stack size exceeded

我还尝试了 updateSliders 的以下实现:

function updateSliders(event, ui) {
    var activeSlider = this;
    $(".slider").not(activeSlider).slider("value", $(activeSlider).slider("value"));
};

updateSliders(event, ui) 的以下实现工作正常:

function updateSliders(event, ui) {
    console.log($(this).slider("value"));
};

问题:
如何避免最大调用堆栈大小错误？我希望所有 slider 同时更新。

编辑:
我在页面上只有三个元素带有 slider 类，如果这有区别的话。

Answer 1

尝试修改该处理程序:

function updateSliders(event, ui) {
    if (!event.originalEvent) return;
    var activeSlider = this;
    $(".slider").slider("value", $(activeSlider).slider("value"));
};

现在这可能会导致您的代码出现一些其他问题，我猜，但是通过检查空的“originalEvent”属性，您可以判断何时由于程序化调用了“更改”处理程序更新。这将使您从该函数所做的所有更新不会引起进一步更改的 Storm 。

Here是 jsfiddle。