使用jQuery滑块通过串行发送数据答案

【问题标题】：Sending data through serial using jQuery slider使用jQuery滑块通过串行发送数据
【发布时间】：2020-06-04 01:56:39
【问题描述】：

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

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

我已经完成了通信部分（TCP 和串行）。问题是，每当用户移动滑块时，沿途的每个值都会非常迅速地一个接一个地发送。我想延迟滑块，以便它在每一步之间以 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 网站上滑块的 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 中进行。

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

谢谢抢

【问题讨论】：

嗨，告诉我你收到了多少信号，我想你会延迟收到一次数据，对吧？

标签： javascript jquery html css user-interface

【解决方案1】：

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

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

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

Lodash 和 Underscore 都为您提供了 Debounce 和 Throttling 函数的可能性。 Ben Alman 还 offers a tiny library（不再维护）用于 Debounce/Throttling。我只能代表 Ben Alman 的图书馆，因为那是我唯一使用过的图书馆。

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。

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

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

【讨论】：

嘿Bash Naimi-Roy！您的解决方案有效并且完全符合我的需要。非常感谢。

【解决方案2】：

你有两种解决方案

1不要从滑块调用延迟函数，只是让间隔总是每100ms发送一次滑块的当前值，同时删除clearInterval(timeOut);

2制作timeDelta来限制Get请求的产生

像这样 https://codepen.io/vkv88/pen/PoqGzJE?editors=1000

【讨论】：