javascript - 限制 jQuery slider 触发更改事件的次数？

Question

我遇到的问题是 jQuery 移动 slider 触发过于频繁，无法在服务器上正确处理。我有这样的东西:

$("#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 发送回站点。如果我将 slider 更改得太快，则会出现问题 - 发送的请求太多，当我停止 slider 时，它需要相当长的时间才能 catch ，甚至会混淆请求 - 因此最终状态甚至可能不会显示实际的 slider 值.

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

谢谢你和亲切的问候

拉克兹

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

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