在移动滑块后的n秒钟后做一些事情

Question

我想用延迟处理滑块的值。所以，如果我用滑块移动到X位置，我想让jquery函数来做一些事情，但是，在n秒钟之后。如果我在这4秒之间再做点什么-从开始就开始计时。

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

我发现：

$.throttle()；

但是它不起作用，或者我不知道如何使用它。

试图添加函数成功，像这样，但没有运气：

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

Answer 1

应该应用于整个功能..。

$('#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);

Answer 2

你想让它在你停止拖拽的4秒后“做些什么”吗？

如果是这样的话，你想要一个退出函数。Underscore.js有一个很好的

德贝尔说，要在事件停止发生后的某个时间执行一个函数。如果在时间结束前更改了值，则计时器将重置。这是非常有用的，当你有大量的事件，并只想做一些与设计结束值的洪水。

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

另一个简单的退出示例：http://jsfiddle.net/bTzTW/

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

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

Answer 3

使用内置的javascript setTimeout()并在更改时重置超时应该可以做到这一点：

var timeout; // define somewhere in outer scope

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

或

var timeout;

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