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

Question

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

它是用静态更新间隔编译的。

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-您需要修改您选择的标签并添加名称属性，例如name＝"txt_select"；并从中删除rhe-value属性2-在setInterval函数之外定义var arg1、arg23-将硬盘组值3000替换为arg1和arg24-将以下代码添加到脚本标签

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

现在，当您从下拉设置中选择值时，Interval函数将读取通过选择下拉设置的arg1的值

在下面的代码中，作业函数不会在页面加载时启动，但您可以通过设置change触发器来选择下拉菜单来启动它，之后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>