socket.ioのボリュームスライダーコントロール - 多すぎるデータ

Question

レンジ入力フィールド（jQuery）とsocket.ioの助けを借りてボリュームコントロールを作成しようとしています。

私はこのコードを使用して、すべてのリスニングデバイスの音量を設定しています。

socket.on("setVolume", function (data) { 
    $("#range").val(data); 
}); 

$("#range").change(function() { 
    socket.emit("setVolume", $("#range").val()); 
}); 

私は今、私は観光名所のキューが積み重なるように見えることに気づくしばらく範囲の入力フィールドをドラッグします。最高の更新レートを維持しながら、応答性の高いインターフェイスを実現するための最良の戦略は何ですか？

私がやってみました：

var timer; 
$("#range").change(function() { 
    window.clearTimeout(timer); 
    timer = window.setTimeout(function() { 
    socket.emit("setVolume", $("#range").val()); 
    },10); 
}); 

しかし、これは、それは非常に低迷感じさせます。

このように多くのデータを処理する最良の方法は何ですか？

Answer 1

2回目の試行は悪くないが、以前に設定したタイムアウトを毎回リセットする。つまり、変更が非常に速い場合は、最後まで更新されない。代わりにこのような何かについてはどうですか？

$(function() { 
    var timer; 
    var disabled = false; 
    $("#slider").slider({ 
     slide: function() { 
      if(disabled) { return; } 
      timer = setTimeout(function() { 
       disabled = false; 
       $("#volume").html($("#volume").html() + "!"); 
      }, 100); 
      disabled = true; 
     } 
    }); 
}); 

私はexample up on JSFiddleです。

Answer 2

変更が完了したら（私のようなもの）、setVolumeイベントを発行することをおすすめします。たとえば、ボリューム用のスライダがある場合は、そのスライダをクリックして保持し、ボリュームを変更します。マウスを動かすたびに、あなたが言ったように値を重ねるjQueryでイベントが発生します。だから、mouseUpなどでこれを実行する必要があります（jQuery UIは、sliderのイベントをいくつか提供しています）。私はあなたがそのアイディアを得たと思う。

これをそのままにしておくと、明らかにあなたのアプリが殺されます。

しかし、何よりも、私はあなたがクライアント側でこれをやろうとし、何かを放出することを忘れるべきだと思います。あなたが実際にすることができない理由がない限り。