CODEWITHSUNDEEP
jquerydelayjquery-ui-slider
user1666761
user1666761

Reputation: 163

Do something after n seconds after moving slider

I want to process value of slider with delay. So If I move with slider to X position, I want to make jquery function to do something BUT, after n seconds. If I do something between these 4 seconds again - start timer from begining.

$('#slider1').slider({
      min: 0,
      max: diff,
      range: true,
      values: [diff-2 , diff],

      slide: function(event, ui) {
      },
      change: function(event, ui) {
         // n SECONDS after changing slider's value do something...
      });

I found:

$.throttle();

but It doesn't work, or I don't know how to use it.

Tried to add to the function succes, like this, but with no luck:

change: function(event, ui) {
     $.throttle( 4000, console.log('this should show after 4 seconds...') );
});

Upvotes: 0

Views: 2341

Answers (4)

user1666761
user1666761

Reputation: 163

Debounce should be applied to whole function...

$('#slider1').slider({
      min: 0,
      max: diff,
      range: true,
      values: [diff-2 , diff],

      slide: function(event, ui) {
      },
      change: _.debounce(function(event, ui) {
         console.log('just after four seconds');
         // now it works
      },4000);

Upvotes: 0

Alex Wayne
Alex Wayne

Reputation: 187024

Do you want to make it "do something" 4 seconds after you stop dragging it?

If so you want a debounce function. Underscore.js has a good one

Debounce says to execute a function some time after an event stops happening. If you change the value before the time is up, the timer resets. This is very useful when you have flood of events, and only want to do something with the design end value of that flood.

var doSomething = function() { alert('hello!') };
doSomething = _.debounce(doSomething, 4000);

$('#slider1').slider({
  min: 0,
  max: diff,
  range: true,
  values: [diff-2 , diff],

  slide: function(event, ui) {
  },
  change: function(event, ui) {
    doSomething();
  });
});

Another simple debounce example: http://jsfiddle.net/bTzTW/

var doSomething = function() {
    alert('fired debounced callback');
};
doSomething = _.debounce(doSomething, 4000);

$('#slider').change(doSomething);
​

Upvotes: 2

Frank Rupprecht
Frank Rupprecht

Reputation: 10383

Using the javascript built-in setTimeout() and resetting the timeout on change should do the trick:

var timeout; // define somewhere in outer scope

change: function(event, ui) {
    clearTimeout(timeout);
    timeout = setTimeout("console.log('this should show after 4 seconds...')", 4000);
});

or

var timeout;

change: function(event, ui) {
    clearTimeout(timeout);
    timeout = setTimeout(function() {
        // more complex code
    }, 4000);
});

Upvotes: 1

Phillip Schmidt
Phillip Schmidt

Reputation: 8818

If you aren't dead-set on using throttle, setTimeout() works fine.

So you'd have:

change: function(event, ui) {
     setTimeout( function(){console.log('this should show after 4 seconds...')},4000 );
});

Upvotes: 0

Related Questions