I'm trying to modify a project for the ESP32 that i saw online. I don't have any education in programing but i find the c on the ardiuno easy to understand and usually the examples we see online are easy enough to follow and modify. Javascript on the other hand, i just can´t seem to understand. The project i'm trying to modify hosts a webpage with some javascript code, it can be seen here

It's compiled with a static update interval.

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 ) ;

Both these functions run every 30 seconds. What i'm trying to do is adding a dropdown menu with pre specified values that can change the setInterval time, but from what i can tell from reading online, those values are read on page load and selecting a new value from the dropdown won't do anything unless i'll do something that checks if the value changed. Like:

<select  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>

There are several examples online but i can't see to apply them to this code without modifying other things and i'm just not skilled enough. Is there someone willing to give a hand and also explain how the code works? Thanks!

CodePudding user response：

1- You need to modify you select tag and add name attribute to it e.g name="txt_select" and remove rhe value attribute from it 2 - define var arg1, arg2 outside your setInterval functions 3- replace the hardset values 3000 to arg1 and arg2 4- add following code to script tag

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

now when you select the value from drop down setInterval function will read the value of arg1 set by select drop down

of following code did the job function won't start at page load but you can start it by setting change trigger to select drop down, after that setInterval changes the duration after each change from drop down.

<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>