Question

这是实时demo。我想要实现的是用户可以手动使用滑块手柄来更改高图表中显示的值，也可以单击播放，它会自动增加滑块的值并在图表中进行更改。到目前为止，我手动滑块动作按设计工作。但是，当我自动滑动时它会增加滑块的值/位置，但它不会触发对图表进行更改的slider.slide函数。可能是一件非常简单的事情，但我找不到它。

滑块代码：

$(function () {
    $("#slider").slider({
        value: 0,
        range: "month",
        min: 0,
        max: data1.length - 1,
        animate: true,
        slide: function (event, ui) {
            chartIncrement(this, ui.value);
        }
    });
});

自动增量代码：

function scrollSlider() {
    var slideValue;
    slideValue = $("#slider").slider("value");
    if (slideValue >= 0) {
        if (slideValue == data1.length - 1) {
            slideValue = -1;
        }
        $("#slider").slider("value", slideValue + 1);
        console.log($("#slider").slider("value"));
        setTimeout(scrollSlider, 1000);
    }
}

$('#startSlider').click(function () {
    scrollSlider();
});

以下是影响图表变化的代码：

function updateChart(chart, value) {
    chart.series[0].setData([data1[value]]);
}
function chartIncrement(identifier, value) {
    $("#slider-val").text(Highcharts.dateFormat('%b %Y', data1[value][0]));
    updateChart(chart, value);
}

如何让自动增量方法同时激活滑动功能？我想如果你改变了价值而不顾方法它会“做”工作。

Answer 1

根据文档，使用change回调而不是slide回调（粗体挖掘）：

slide（event，ui）类型：幻灯片

在幻灯片播放期间触发每次鼠标移动。提供的价值   事件为ui.value表示句柄将具有的值   由于目前的运动。取消该活动将阻止   移动的把手和把手将继续有它   以前的价值。

change（event，ui）类型：slidechange

用户滑动手柄后触发，如果值已更改;要么   如果通过值方法以编程方式更改。

更新了fiddle。

JQuery-UI滑块自动增量但不会触发幻灯片事件

1 个答案: