Do something after n seconds after moving slider

Question

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

Did you already include the plugin? – Asad Saeeduddin Nov 30 '12 at 17:34 — Asad Saeeduddin, Nov 30 '12 at 17:34

Alex Wayne · Answer 1 · 2012-11-30T18:05:03.810

2

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

edited Nov 30 '12 at 18:05

answered Nov 30 '12 at 17:36

Alex Wayne

178,991
47
309
337

It doesn't work for me. Changes are made immediately, not with delay. – user1666761 Nov 30 '12 at 17:39
Huh? The change fires immediately, this doesn't change that. This simply delays the `doSomething` function called in response to that change. You need to be more specific about what "not working" means if you want more help. – Alex Wayne Nov 30 '12 at 17:41
I want to WAIT 4 seconds to do this console.log()... For example, if I move slider every three seconds the console.log() shouldn't fire at all. Because there will never be 4 seconds with "doing nothing". Your code should work, but there's no delay :( – user1666761 Nov 30 '12 at 17:44
I've edited my answer, I wasn't using underscore properly. But you may have to make a JSFiddle showing your problem, but what you say is happening shouldn't be happening. – Alex Wayne Nov 30 '12 at 18:06
ok man, thanks for effort. Now it works, check my answer... and thanks especially for that library :) – user1666761 Nov 30 '12 at 18:10

Frank Rupprecht · Answer 2 · 2012-11-30T17:50:10.090

1

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

edited Nov 30 '12 at 17:50

answered Nov 30 '12 at 17:37

Frank Rupprecht

9,191
31
56

I changed my answer to meat the requirements you stated in you other comments. – Frank Rupprecht Nov 30 '12 at 17:51

score 0 · Answer 3 · answered Nov 30 '12 at 17:36

0

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

answered Nov 30 '12 at 17:36

Phillip Schmidt

8,805
3
43
67

score 0 · Accepted Answer · answered Nov 30 '12 at 18:09

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

Do something after n seconds after moving slider

4 Answers4