Requests between Web and CLP Siemens small delay

Question

Requests between Web and CLP Siemens small delay

Navigation

#1 by (1 votes)

1

This Jquery function is controlled when a switch on my page is performed a change

$("#statusM1").change(function () {

        if (statusM1 == 0) {
            url = "index.html";
            name = '"motor"';
            val = 1;
            sdata = escape(name) + '=' + val;
            $.get(url, sdata, function (result) { });
        } else if (statusM1 == 1) {
            url = "index.html";
            name = '"motor"';
            val = 0;
            sdata = escape(name) + '=' + val;
            $.get(url, sdata, function (result) { });
        }
    });


$.ajaxSetup({ cache: false });
    setInterval(function () {
        $.get("IOCounter.html", function (result) {

            statusM1 = result.trim();
            $('#counter').text(statusM1);

            if (statusM1 == 1) {
                $('#statusM1')[0].MaterialSwitch.on();
            } else {
                $('#statusM1')[0].MaterialSwitch.off();
            }

        });
    }, 1000);

setInterval has the ability to collect a data from the IOCounter.html page

The above script is working but I realize that at the time of the change there is a delay a little confusion at the time of the change and the request.

$. get (url, sdata, function (result) {});

Explaining a bit better we have the following scenario:

1st Switch is initially ON,

2nd then clicking it goes OFF,

3rd and with this execute the .change function,

4º we have an interval in which the request is not made then the Switch returns to the ON, as it has not yet received the true value of setInterval.

5th after this little confusion in the Switch takes the correct value of the request and returns to the OFF

What needs to be done to mitigate this inconvenience?

jquery html5 ajax

asked by anonymous 17.07.2018 / 02:09

1 answer

INSERT WITH TWO TABLES - PHP Change attribute of an array of objects in the state in the application

score 1 · Accepted Answer

As discussed in the comments, using Ajax requests with setInterval is not indicated because it is asynchronous to Ajax processing. The Ajax return can take a millisecond or even a few seconds, so calling requests with a predefined interval can create a bottleneck on the server or hang the browser.

You should use setTimeout after Ajax has been processed. This way each request will be done in an ordered and queued way.

To do this, put Ajax inside a function and call it again after the return:

function f(){
  $.get("IOCounter.html", function (result) {

      statusM1 = result.trim();
      $('#counter').text(statusM1);

      if (statusM1 == 1) {
          $('#statusM1')[0].MaterialSwitch.on();
      } else {
          $('#statusM1')[0].MaterialSwitch.off();
      }
      // chama novamente a função após 1 segundo, criando um loop
      setTimeout(f, 1000);
  });
}

// chama a função após 1 segundo.
setTimeout(f, 1000);

// Ou, se esse segundo inicial não for necessário
// pode chamar a função sem intervalo com

f();

// removendo a linha setTimeout(f, 1000); acima

Remembering that the $.get function will only be called if Ajax succeeds. If there is an error, setTimeout will not be called and the loop will stop. So it is better to call setTimeout in callback .always to ensure that the function will always be called again:

function f(){
  $.get("IOCounter.html", function (result) {

      statusM1 = result.trim();
      $('#counter').text(statusM1);

      if (statusM1 == 1) {
          $('#statusM1')[0].MaterialSwitch.on();
      } else {
          $('#statusM1')[0].MaterialSwitch.off();
      }
  })
  .always(function(){
      // chama novamente a função após 1 segundo, criando um loop
      setTimeout(f, 1000);
  });
}