jquery - 移动滑块后 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

你想让它在停止拖动 4 秒后“做某事”吗？

如果是这样，你想要一个去抖动功能。Underscore.js 有一个很好的

Debounce 表示在事件停止发生后的某个时间执行函数。如果您在时间结束之前更改值，则计时器将重置。当您有大量事件时，这非常有用，并且只想用该洪水的设计最终值做一些事情。

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 2

使用内置的javascriptsetTimeout()并重置更改超时应该可以解决问题：

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

Answer 3

去抖应该应用于整个功能......

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

如果您不死心使用throttle，则setTimeout()可以正常工作。

所以你会有：

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