0

スライダーの値を遅らせて処理したい。したがって、スライダーを使用してX位置に移動すると、n秒後にjquery関数に何かを実行させたいと思います。この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...') );
});
4

4 に答える 4

2

ドラッグを停止してから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);
​
于 2012-11-30T17:36:25.240 に答える
1

組み込みの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);
});
于 2012-11-30T17:37:32.537 に答える
0

の使用に行き詰まっていない場合は、正常throttleにsetTimeout()動作します。

だからあなたは持っているでしょう：

change: function(event, ui) {
     setTimeout( function(){console.log('this should show after 4 seconds...')},4000 );
});
于 2012-11-30T17:36:16.490 に答える
0

デバウンスは関数全体に適用する必要があります...

$('#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);
于 2012-11-30T18:09:08.980 に答える