JQuery-UI滑塊自動增量但不會觸發幻燈片事件

Question

這是現場演示 。 我想要實現的是用戶可以手動使用滑塊手柄來更改高圖表中顯示的值，也可以單擊播放，它會自動增加滑塊的值並在圖表中進行更改。 到目前為止，我手動滑塊動作按設計工作。 但是，當我自動滑動時它會增加滑塊的值/位置，但它不會觸發對圖表進行更改的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回調（bolding mine）：

slide（event，ui）類型：幻燈片

滑動期間每次鼠標移動時觸發。 事件中提供的值為ui.value表示句柄將由於當前移動而具有的值。 取消事件將阻止句柄移動，句柄將繼續具有其先前的值。

---

change（event，ui）類型：slidechange

用戶滑動手柄后觸發，如果值已更改; 或者如果通過值方法以編程方式更改值。

更新了小提琴 。