How to terminate endless while loop via setTimeout in Javascript

Question

I have a piece of code with while loop which I would like to stop by setTimeout(). But it seems like a endless loop, which never triggers setTimeout(). If I remove while loop, timeout triggers correctly. What is wrong please?

$(document).ready(function() 
{
    var i = 0, s = false;

    setTimeout( function()
    {
        s = true;
        console.log( "Timeuot!!!" );
        console.log( "s value is " + s );
    }, 1000 );

    while( s === false )
    {
        console.log( "this is while and s is " + s );
        i++;
    }

    console.log( "iterations: " + i );
});

@Quentin the s inside the setTimeout is set at the global scope. why am I wrong ? — Royi Namir
– Royi Namir, Commented Oct 13, 2016 at 11:46
@RoyiNamir — The function passed to setTimeout is defined inside another function. It has access to the scope of that function. Since there is a non-global s in that scope, it accesses that s. — Quentin
– Quentin, Commented Oct 13, 2016 at 11:47
@RoyiNamir h s inside the setTimeout is the one of the enclosing scope so the one declared and defined a couple of lines above. — pinturic
– pinturic, Commented Oct 13, 2016 at 11:48

Quentin · Accepted Answer · 2016-10-13 11:53:42Z

7

JavaScript runs a single event loop. It won't stop in the middle of a function to see if there are any events (such as clicks or timeouts) that would trigger a different function.

In short: It won't run the timed function until the while loop has finished.

To do this sort of thing, you'd normally have an event driven iterator.

var i = 0,
  s = false;

setTimeout(function() {
  s = true;
  console.log("Timeuot!!!");
  console.log("s value is " + s);
}, 1000);

next();

function next() {
  if (s) {
    return done();
  }
  console.log({
    s, i
  });
  i++;
  setTimeout(next, 0);
}

function done() {
  console.log("iterations: " + i);
}

edited Oct 13, 2016 at 11:53

answered Oct 13, 2016 at 11:47

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

2 Comments

Royi Namir Over a year ago

Mmmm. But it does stop and shows that it is not infinite loop .jsbin.com/cewewarovo/1/edit?html,js,console,output

Quentin Over a year ago

@RoyiNamir — JSbin appears to mangle code to stop people doing DOS attacks with it.

while (s === false) {if (window.runnerWindow.protect.protect({line: 13}))break;window.runnerWindow.proxyConsole.log("this is while and s is " + s);i++;}

— It adds a break in there.

Shlomi Schwartz · Accepted Answer · 2016-10-13 13:13:03Z

1

As already mentioned the while loop blocks the one and only thread. To let your example do the thing you want, replace the while loop with setInterval(function) like this:

$(document).ready(function() 
{
    var i = 0, s = false;

    setTimeout( function()
    {
        s = true;
        console.log( "Timeout!!!" );
        console.log( "s value is " + s );
    }, 1000 );


    var interval = setInterval(function() {
      console.log( "this is while and s is " + s );
      i++;      
      if (s) {
        clearInterval(interval);
        console.log("i is " + i)
      }
    }, 100);    
});

edited Oct 13, 2016 at 13:13

Shlomi Schwartz

8,95330 gold badges121 silver badges201 bronze badges

answered Oct 13, 2016 at 11:58

Chrisposure

1771 silver badge14 bronze badges

Comments

pinturic · Accepted Answer · 2016-10-13 11:46:54Z

0

setTimeout is never called do the the fact that the while never ends and so the even dispatcher is not going to trigger the setTimeout.

answered Oct 13, 2016 at 11:46

pinturic

2,2631 gold badge17 silver badges31 bronze badges

Collectives™ on Stack Overflow

How to terminate endless while loop via setTimeout in Javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related