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

Question

我有一个问题，jQuery mobile slider经常触发，无法在服务器上正确处理。我有这样的东西：

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


      });

这非常好用，/\u update_滑块在python中启动一个函数，该函数发送数据.结果回到现场。如果我改变滑块的速度太快，就会出现问题——发送的请求太多，当我停止滑块时，它需要相当长的时间才能跟上，甚至会混淆请求——因此结束状态甚至可能不会显示实际的滑块值。在

什么是一个干净的解决办法？无论如何要限制更改事件触发的次数？在

谢谢你的好意

莱克兹

Answer 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
        });
    });
}

调整延迟变量以适合您

Answer 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;
});