javascript - JQuery-UI slider 自动递增但不触发幻灯片事件

Question

这里是直播demo 。我想要实现的是，用户可以手动使用 slider handle 来更改 highcharts 图表中显示的值，也可以单击“播放”，它将自动增加 slider 的值并在图表中进行更改。到目前为止，我的手动 slider Action 按设计工作。但是，当我触发自动幻灯片时，它确实会增加 slider 的值/位置，但不会触发对图表进行更改的 slider.slide 函数。可能很简单，但我找不到它。

slider 代码:

$(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 )Type: slide

Triggered on every mouse move during slide. The value provided in the event as ui.value represents the value that the handle will have as a result of the current movement. Canceling the event will prevent the handle from moving and the handle will continue to have its previous value.

<小时/>

change( event, ui )Type: slidechange

Triggered after the user slides a handle, if the value has changed; or if the value is changed programmatically via the value method.

已更新fiddle .