javascript - 使用 jQuery slider 通过串行发送数据

Question

这是我关于堆栈溢出的第一个问题，所以我想向大家问好。我今天的问题如下...

我正在尝试使用 jQuery UI slider 通过 TCP/IP 将值发送到 Arduino 的串行端口。

我已经完成了通信部分(TCP 和串行)。问题在于，每当用户移动 slider 时，沿途的每个值都会非常快速地一个接一个地发送。我想延迟 slider ，以便它在每个步骤之间延迟 100 毫秒发送这些值。

我尝试使用“setInterval”和“clearInterval”但没有成功。这是代码:

$(document).ready(function() {

    $( "#mySlider" ).slider({
        range: "min",
        min: 0,
        max: 180,
        value: 90,
        slide: function( event, ui ) {

        delayPan(ui.value);


        }   
});

$( "#total" ).val( $( "#mySlider" ).slider( "value" ) );

});



var timeOut;

function delayPan(vals) {

    $( "#total" ).val("$" +  vals );

    //the part below sends values to another PHP file in order to then send it using TCP/IP

    timeOut = setInterval(function()
    {

        $.get("insert_commands.php", {command: 39, parameter: 0, value: vals, number: 0}, 
        function(command,parameter,value,number){}, "json");

    }, 100);

    clearInterval(timeOut); 

}

为了更清楚起见，这里是我的 index.php 网站上 slider 的 HTML:

<label for="total">ANGLE:</label>
<input type="text" id="total" style="border:0; color:#fa4b2a; font-weight:bold;">
</p>
<div id="mySlider"></div>

我不知道如何解决这个问题 - 我对 javascript/jQuery 还很陌生。我可以延迟 Arduino 或 TCP 套接字上的接收，但主网站上还有其他按钮设置了不同的延迟，因此如果可能的话，我需要在 jQuery 中执行此操作。

如果有任何建议，我将不胜感激。

谢谢 罗布

Answer 1

恭喜你提出了一个写得好的问题。

我想你正在看的是 Debounced or Throttled函数(取决于您想要发送新值的次数)。在您的情况下，您想要“限制”该函数 - 这意味着限制调用它的频率。

因此我们可以每 100 毫秒限制一次位置发送功能。这样，即使 slider 位置在 100 毫秒内改变 25 次，AJAX 请求也只会在这 100 毫秒内发送一次。

Lodash 和 Underscore 都为您提供了对函数进行去抖动和限制的可能性。本阿尔曼也offers a tiny library (不再维护)用于去抖/节流。我只能代表本·阿尔曼的图书馆，因为那是我唯一使用过的图书馆。

I've created a Codepen to demonstrate. Click to see it in action. 相关代码如下:

$(document).ready(function() {

  function delayPan(vals) {

    $( "#total" ).val("$" +  vals );

    //the part below sends values to another PHP file in order to then send it using TCP/IP
    $.get("insert_commands.php", {command: 39, parameter: 0, value: vals, number: 0}, function(command,parameter,value,number){}, "json");
 }

    const throttledDelayPan = $.throttle(1000, delayPan);

    $( "#mySlider" ).slider({
        range: "min",
        min: 0,
        max: 180,
        value: 90,
        slide: function( event, ui ) {
            throttledDelayPan(ui.value);
         }   
    });

  $( "#total" ).val( $( "#mySlider" ).slider( "value" ) );

});

基本上，您声明一个发送 AJAX 请求的函数。在您的示例中，delayPan。

然后将其传递到 Throttle 库的节流函数 ($.throttle) 中，以及节流时间(在本例中为 1000 毫秒，用于演示延迟)。

throttle 函数返回另一个函数，我们将其存储在throttledDelayPan 中。

最后我们在 jQuery UI Slider 的“slide”回调中调用throttledDelayPan。

顺便说一句，我有一些建议:

1. 如果您特别想将数据发送到 REST API，我会劝阻您不要使用 GET 请求 - 使用 POST 请求会更惯用。
2. 您可能希望将其分为两个函数 - 发送 AJAX 请求的节流函数和更新“#total”显示的函数。这样，您就可以不断更新显示，同时仍然减少发送的 AJAX 请求数量。