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

我找到了：

。
$油门（）;

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

尝试添加功能成功，像这样，但没有运气：

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

Answer 1

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

如果需要，您需要 debounce 功能。 Underscore.js has a good one

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

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

Answer 3

如果你没有使用throttle，setTimeout()工作正常。

所以你有：

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

Answer 4

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

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

移动滑块后n秒后执行某些操作

4 个答案: