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.

Tomalak · Accepted Answer · 2010-07-07 16:29:46Z

17

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

edited Jul 7, 2010 at 16:29

answered Jul 7, 2010 at 16:12

Tomalak

339k68 gold badges547 silver badges635 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tomalak Over a year ago

@betacar: Bandwidth consupmption? IE Performance? How would I know? ;-) It's your code, you are the only one who can possibly know.

Tim Rogers · Accepted Answer · 2010-07-07 16:16:49Z

3

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.

answered Jul 7, 2010 at 16:16

Tim Rogers

21.8k8 gold badges55 silver badges69 bronze badges

1 Comment

Ruslan López Over a year ago

This solution has the advantage that can be run from the body.

gblazex · Accepted Answer · 2010-07-07 16:18:36Z

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

edited Jul 7, 2010 at 16:18

answered Jul 7, 2010 at 16:12

gblazex

50.3k12 gold badges100 silver badges92 bronze badges

6 Comments

Tomalak Over a year ago

+1 for mentioning the benefits of defining the $gannt variable outside of the function.

Tomalak Over a year ago

@galambalazs: I love how my "+1" comment attracted two votes (one of them is your own, I presume), but your answer itself still has +1 only. ;-) Shouldn't I also up-vote the answer if I happen to agree with a "+1" comment? Hmmm... :-)

gblazex Over a year ago

@Tomalak I upvoted because it has a valid point (setTimeout), which I thought about but then ignored. But after gave it another thought I realized that even if I would never do such a thing, a long jQuery codebase can cause hangups in the browser if the functions gather in the UI stack. And since you wrote it I gave you +1 because it should be highlighted. :)

gblazex Over a year ago

And of course I also upvoted because it was a nice behavior which I'm not kinda used to in SO

Tomalak Over a year ago

@galambalazs: Agreed, user behaviour has degraded over time. It was a lot better in the early days when the user base was still relatively small. This very thing proves it: Someone besides yourself thought my "+1"-comment above was worth a vote, but could not be bothered to vote on your answer as well.

|

Matt Evanoff · Accepted Answer · 2010-07-07 16:11:34Z

0

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.

answered Jul 7, 2010 at 16:11

Matt Evanoff

9664 silver badges9 bronze badges

Comments

Sarath Bade · Accepted Answer · 2020-09-23 14:21:54Z

0

window.setInterval(function () {
    // add your jQuery here
}, 100);

answered Sep 23, 2020 at 14:21

Sarath Bade

2242 silver badges6 bronze badges

1 Comment

Taslim Oseni Over a year ago

Code-only answers are low quality answers.

Collectives™ on Stack Overflow

jQuery infinite function execution

5 Answers 5

1 Comment

1 Comment

6 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

6 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related