限制 jQuery 滑块触发更改事件的次数？答案

【问题标题】：Restrict amount of times jQuery slider fires change event?限制 jQuery 滑块触发更改事件的次数？
【发布时间】：2015-05-11 17:46:40
【问题描述】：

我的问题是 jQuery 移动滑块触发太频繁而无法在服务器上正确处理。我有这样的事情：

$("#testSlider").change(function( event, ui ) {
        $.getJSON($SCRIPT_ROOT + '/_update_sliders', {
        c: $('#testSlider').val()
  }, function(data) {
    g4.updateOptions( { 'file': data.result } );


      });

这工作得很好，/_update_sliders 在 python 中启动了一个函数，它将 data.result 发送回站点。如果我更改滑块的速度太快，就会出现问题 - 发送的请求太多，当我停止滑块时，它需要相当长的时间才能赶上，甚至会混淆请求 - 所以最终状态甚至可能不会显示实际的滑块值.

什么是干净的解决方案？无论如何要限制更改事件触发的次数？

谢谢你和亲切的问候

湖人

【问题讨论】：

标签： javascript jquery python jquery-mobile flask

【解决方案1】：

您可以使用以下概念对其进行限制。使用 setTimeout() 来增加延迟，如果变化不断发生，延迟会被推迟，直到一个完整的延迟期结束后才会触发

var sliderTimer,
    sliderAjaxDelay = 100;

$("#testSlider").change(function (event, ui) {
    if (sliderTimer) {
        clearTimout(sliderTimer); /* if already a timeout, clear it */
    }

    // throttle requests using setTimeout 
    sliderTimer = setTimeout(sliderAjaxUpdate, sliderAjaxDelay);
});   


function sliderAjaxUpdate() {
    $.getJSON($SCRIPT_ROOT + '/_update_sliders', {
        c: $('#testSlider').val()
    }, function (data) {
        g4.updateOptions({
            'file': data.result
        });
    });
}

将延迟变量调整为适合您的值

【讨论】：

非常感谢。代码本身有效，但不是我希望它的行为方式 - 例如，当我永久移动滑块时，它根本不会更新我的数据。当然，因为它总是重置超时。相反，我想要的是，它确实会尽可能频繁地更新，但仅在前面的请求完成时才更新。
这是干什么用的？
我正在绘制一个图表，并且线条数据随着我使用滑块设置的参数而变化。所以每次滑块改变时，线的点都会重新计算并发送回客户端进行重绘。我找到了一个使用 jQuery ajaxComplete 函数的解决方案，虽然我不确定这是否是一种干净的方式（见我的回答）。
使用标志是我的另一种想法。将在 cchange 处理程序上使用标志，但不是 ajaxComplete，因为这也会触发页面中的所有其他 ajax 调用
你是什么意思？我的意思是，当经常调用更改时，我如何设置更改标志？

【解决方案2】：

我在 jQuery 中找到了一个可行的解决方案，但我不确定这是否是一种“干净”的方式：

var complete = 0;

$("#testSlider").change(function (event, ui) {
    if (complete == 1) {
        sliderAjaxUpdate();
        complete = 0;
    };

});

function sliderAjaxUpdate() {
    $.getJSON($SCRIPT_ROOT + '/_update_sliders', {
        c: $('#testSlider').val()
    }, function (data) {
        g4.updateOptions({
            'file': data.result
        });
    });
};

$( document ).ajaxComplete(function() {
  complete = 1;
});

【讨论】：