使用 socket.io 控制音量滑块 - 数据过多答案

【问题标题】：Volume slider control with socket.io - Too much data使用 socket.io 控制音量滑块 - 数据过多
【发布时间】：2012-02-06 10:35:18
【问题描述】：

我正在尝试借助范围输入字段 (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);
});

但这让人感觉很迟钝。

处理大量此类数据的最佳方法是什么？

【问题讨论】：

标签： jquery node.js socket.io lag

【解决方案1】：

您的第二次尝试还不错，但每次都会重置先前设置的超时时间——这意味着如果更改非常快，您将在接近尾声之前获得更新。换成这样的怎么样？

$(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。

【讨论】：

【解决方案2】：

我建议在更改完成时发出 setVolume 事件（类似于 youtube）。例如，当您有音量滑块时，您单击它，按住它并更改音量。每次移动鼠标时，都会在 jQuery 中触发 change 事件，如您所说，该事件会堆积值。所以你应该在mouseUp 或类似的东西上做这件事（jQuery UI 在他们的slider 中为此提供了一些事件）。我想你明白了。

保持原样显然会杀死您的应用程序。

但最重要的是，我认为您应该尝试在客户端执行此操作而忘记发出任何内容。除非有理由你实际上不能。

【讨论】：