jQuery UI слайдер - большие диапазоны

Question

У меня есть слайдер, сделанный с jquery ui, который отлично работает, за исключением того, что, поскольку диапазон от 0 до 250000, и поскольку у меня есть событие, вызывающее запрос ajax каждый раз, когда происходят какие-либо изменения, if Я медленно сползаю с одной стороны на другую, результатом будет огромное количество запросов ajax, что не очень хорошо.

Был копаем документацию jquery ui, но не видел способа решить эту проблему. Я временно блокировал бы событие с момента, когда пользователь нажимает на ползунок и только запускает событие, когда пользователь перестает взаимодействовать с ним, но ничего не нашел об этом.

Любые мысли?

Cheers!

Answer 1

Вместо того, чтобы подписываться на слайд-событие слайдера, почему бы не подписаться на его слайд-обмен или события остановки?

$(".selector").slider({ 
    change: function(event, ui) { ... } // Called after slidestop or if changed programmatically 
    stop: function(event, ui) { ... } // Called when user stops sliding 
}); 

Answer 2

Одним из возможных вариантов было бы создать таймер и дать ему период ожидания в миллисекундах, скажем, 500, который составляет половину второго. Сбрасывайте таймер обратно в период таймаута каждый раз при срабатывании слайд-события.

Если таймер успевает полностью отсчитать, вы можете предположить, что пользователь остановил движение ползунка и активировал вызов Ajax.

Это подход, который плагины JQuery, такие как TypeWatch, используют только для отправки запроса Ajax, когда пользователь перестает печатать в текстовом поле.

Answer 3

we can define steps in it also like, 

    $("#slider-range-max").slider({ 
      range : "max", 
      min : 0, 
      max : 200, 
      step : 0.1, //steps 
      value : 200, 
      slide : function(event, ui) { 
       $("#amount").val(ui.value); 
      } 
     }); 

Even we can handle it by writing value in textbox like this, 

on value change of textbox call this function by passing parameter this.value 

function setSlider(value) { 
    $("#slider-range-max").slider({ 
     range : "max", 
     min : 0, 
     max : 200, 
     step : 0.1, 
     value : value, // value will be setted slider position as par value 
     slide : function(event, ui) { 
      $("#amount").val(ui.value); 
     } 
    }); 
    $("#amount").val($("#slider-range-max").slider("value")); 
}