jQuery infinite function execution

Question

We want to know if it is possible to have a function using jQuery to inspect a number of elements and, depending on the types assigned to them by one click, perform other functions. Basically, a function that would run forever, while the user does not refresh the page.

The idea is not to depend on events clicks to perform a function, but the classes assigned to a specific element.

For example:

$("td.gantt").each(function() {
    if($(this).hasClass("oper")) {
       //execute a serie of functions
    }
    if($(this).hasClass("preop")) {
      //execute a serie of functions
    }
});

The above is executed once, and we need to run all the time.

Greetings from Venezuela.

Answer 1

I am not sure exactly what you are trying to do, but have you tried setInterval? It will keep running if that is what you really want.

Answer 2

// define a function...
function ganttEach() {
  $("td.gantt").each(function() {
    // ...
  });
}

// ...repeat it once every second
window.setInterval(ganttEach, 1000);

You can't "let it run all the time" (like, in a while(true) loop) because JavaScript is single-threaded and blocking the thread means your other code will never run. setInterval() makes sure there are necessary "gaps" for other code to execute.

setInterval() returns an ID that you can store in a variable and feed to clearInterval() at some point to make it stop again.

---

If you want to make sure that every new iteration of your function starts only after the previous one has really finished, use setTimeout() instead:

// define a self-repeating function...
function ganttEach() {
  $("td.gantt").each(function() {
    // ...
  });
  window.setTimeout(ganttEach, 1000); // calls itself again in one second
}

// ...initiate self-repeating function
ganttEach();

You should probably include some way to stop the endless repetition here as well, like introducing a flag that's checked before the setTimeout() call.

Answer 3

It is possible, with setInterval. My advice would be to select the element outside of the repeating function so as to minimize the overhead.

An infinite loop would lock the browser UI, as it is a single threaded environment. Set interval, however let you add actions to the UI stack which will be executed after a given period of time. You can specify this period in the second parameter of setInterval.

// select the element outside
// to minimize overhead
$gantt = $("td.gantt");

// define a repeating action
setInterval(function() {
    $gantt.each(function() {
        if($(this).hasClass("oper")) {
           //execute a serie of functions
        }
        if($(this).hasClass("preop")) {
          //execute a serie of functions
        }
    });
}, 100); // repeat interval: 100ms

Answer 4

You can run your check every few milliseconds, say 50ms, using setInterval

window.setInterval (function () { 
  // do checks here
}, 50);

You might end up using a lot of CPU power if your checks are too frequent, or too complicated.