Question

I have a jquery based slider on the page. This slider calls a function to update a variable each time a value changes and does a few other things. This means that the function is called too often when the slider handle is being dragged. And this is causing performance issues.

Current Psudo:

Slider.onSlide: trigger function ValueChange(V)
function ValueChange(V) {Variable=V; other code;};

I want to change the value only if X number of milliseconds (300) have passed since the last change. This will greatly improve performance.

The aim here is to reduce the number of times ValueChange(V) is triggered while sliding. Only a time delay will not work here, it is important that;

1. The last value of the slider is always set even if the last slide position was within the X number of seconds period. (although it can be set after X number of seconds and not immediately)

2. The value is changed to the latest slider position value and not the slider position value X number of seconds before.

3. I think an intermediate function is required that then calls ValueChange(V) if these two checks above pass.

I hope it made sense … really need help with this …. its too complicated for my under developed brain … really ! 😀

Thanks in advance,
Norman.

P.S: A jQuery solution to this is also welcome since I have the library available.

Answer 1

Store the value in a variable each time it changes, and use a function that runs on an interval to check if the value has changed:

var currentValue, lastValue;

function ValueChange(V) {
  currentValue = V;
};

window.setInterval(function(){
  if (lastValue != currentValue) {
    lastValue = currentValue;
    Variable = currentValue; other code;
  }
}, 50);

I chose an interval of 50 ms. as that is a resonable interval for animating things. You can try to use the interval 300 ms., but that will only update three times a second, which may look jerky.