使用下拉列表中的值在 Javascript 中设置 setInterval var

Question

我正在尝试修改我在网上看到的 ESP32 的项目。 我没有接受过任何编程方面的教育，但我发现 ardiuno 上的 c++ 很容易理解，通常我们在网上看到的例子很容易理解和修改。 Javascript 另一方面，我似乎无法理解。 我正在尝试修改的项目托管了一个带有一些 javascript 代码的网页，可以在这里看到

它是用 static 更新间隔编译的。

setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var x = (new Date()).getTime(),
          y = parseFloat(this.responseText);
      //console.log(this.responseText);
      if(chartH.series[0].data.length > 40) {
        chartH.series[0].addPoint([x, y], true, true, true);
      } else {
        chartH.series[0].addPoint([x, y], true, false, true);
      }
    }
  };
  xhttp.open("GET", "/humidity", true);
  xhttp.send();
}, 30000 ) ;

setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var x = (new Date()).getTime(),
          y = parseFloat(this.responseText);
      //console.log(this.responseText);
      if(chartP.series[0].data.length > 40) {
        chartP.series[0].addPoint([x, y], true, true, true);
      } else {
        chartP.series[0].addPoint([x, y], true, false, true);
      }
    }
  };
  xhttp.open("GET", "/pressure", true);
  xhttp.send();
}, 30000 ) ;

这两个函数每 30 秒运行一次。 我想要做的是添加一个下拉菜单，其中包含可以更改 setInterval 时间的预先指定的值，但是从我从在线阅读中可以看出，这些值是在页面加载时读取的，并且从下拉菜单中选择一个新值不会”除非我会做一些检查值是否改变的事情，否则不要做任何事情。 喜欢：

<select class="dropdown" value="1">
    <option value="2000">2 sec</option>
    <option value="10000" selected>10 sec</option>
    <option value="15000">15 sec</option>
    <option value="30000">30 sec</option>
    <option value="60000">1 min</option>
</select>

网上有几个示例，但我无法在不修改其他内容的情况下将它们应用于此代码，而且我还不够熟练。 是否有人愿意伸出援手并解释代码的工作原理？ 谢谢！

Answer 1

1- 您需要修改 select 标签并向其添加名称属性，例如 name="txt_select" 并从中删除 rhe value 属性 2- 在 setInterval 函数之外定义 var arg1、arg2 3- 将 hardset 值 3000 替换为 arg1 和 arg2 4-将以下代码添加到脚本标签

$('select[name="txt_select"]').change(function(e){
  e.preventDefault();
  ele = $(this);
  arg1 = ele.val();
  arg2 = ele.val();
}) ;

现在当你 select 下拉 setInterval function 的值将读取 select 下拉设置的 arg1 的值

以下代码完成的工作 function 不会在页面加载时启动，但您可以通过将更改触发器设置为 select 下拉菜单来启动它，之后 setInterval 会更改每次下拉菜单更改后的持续时间。

<script type="text/javascript">
jQuery(document).ready(function($) {
    
    var arg1 = 3000;
    var setInt1;

    function startNow(){
        setInt1 = setInterval(function(){
        
            console.log('Temperature');
        
        },arg1);
    }
    
    $('select[name="txt_select"]').change(function(e){
        e.preventDefault();
        clearInterval(setInt1);
        ele = $(this);
        arg1 = ele.val();
        arg2 = ele.val();
        startNow(); 

    });
});
</script>