Timer and onChange

Question

I need to run the goTo() function cautiously because it would download a large image each time, so to skip the unintended changes, I'm checking if the value has changed and a certain time has elapsed (2000ms).

scrubber.onValueChanged = function (value) {
    var timer;
    if (gallery.getCurrentIndex() !== value) {
        console.log('value changed');
        clearTimeout(timer); console.log('timer reset');
    }
    timer = setTimeout(function() {
      console.log('updating...');
      gallery.goTo(value);
    }, 2000);
};

.. this works but it doesn't skip the changes it should, it still runs the goTo() function for ALL the values I have moved from, to and in-between.

Answer 1

timer is a local variable. So every time the function is called timer is being reset and clearTimeout(timer) doesn't work as expected. To fix that move timer variable outside the function scope or make it global.

var timer;
....
scrubber.onValueChanged = function (value) {
    if (gallery.getCurrentIndex() !== value) {
        console.log('value changed');
        clearTimeout(timer); console.log('timer reset');
        timer = setTimeout(function() {
          console.log('updating...');
          gallery.goTo(value);
        }, 2000);
    }

};