Question

我遇到的问题是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发送回站点。如果我更快地更改滑块会发生问题 - 发送的请求太多，当我停止滑块时需要花费相当长的时间才赶上它甚至混淆请求 - 所以结束状态甚至可能不会显示实际的滑块值

这是一个干净的解决方案？无论如何要限制变更事件发生的次数？

谢谢你，亲切的问候

lakerz

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中找到了一个有效的解决方案，但我不确定这是否是一个＆＃34; clean＆＃34;方式：

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

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

2 个答案: