Create a JavaScript loop without while

Question

I am trying to create a page which needs to preform lots of loops. Using a while/for loops cause the page to hang until the loop completes and it is possible in this case that the loop could be running for hours. I have also tried using setTimeout, but that hits a recursion limit. How do I prevent the page from reaching a recursion limit?

var looper = {
    characters: 'abcdefghijklmnopqrstuvwxyz',
    current: [0],
    target: '',
    max: 25,
    setHash: function(hash) {
    this.target = hash;
    this.max = this.characters.length;
    },
    getString: function() {
    string = '';
    for (letter in this.current) {
        string += this.characters[this.current[letter]];
    }
    return string;
    },
    hash: function() {
    return Sha1.hash(this.getString());
    },
    increment: function() {
    this.current[0] += 1;
    if (this.current[0] > this.max) {
        if (this.current.length == 1) {
        this.current = [0, 0];
        } else {
        this.current[1] += 1;
        this.current[0] = 0;
        }
    }
    if (this.current[1] > this.max) {
        if (this.current.length == 2) {
        this.current[2] == 0;
        } else {
        this.current[3] += 1;
        this.current[2] = 0;
        }
    }
    },

    loop: function() {
    if (this.hash() == this.target) {
        alert(this.getString());
    } else {
        this.increment();
        setTimeout(this.loop(), 1);
    }
    }
}

Why are you doing this kind of processing on the client side, exactly? — Karl Knechtel
– Karl Knechtel, Commented Jun 24, 2011 at 1:55

Joe Cheng · Accepted Answer · 2011-06-24 03:50:19Z

3

setInterval is the usual way, but you could also try web workers, which would be a more straightforward refactoring of your code than setInterval but would only work on HTML5 browsers.

http://dev.w3.org/html5/workers/

edited Jun 24, 2011 at 3:50

answered Jun 24, 2011 at 1:48

Joe Cheng

8,08144 silver badges37 bronze badges

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

1 Comment

AJ00200 Over a year ago

Yes, I have used web workers before in experimental code and may use them later in this project. But right now it needs to be cross-browser. Thanks for the advice.

icktoofay · Accepted Answer · 2011-06-24 01:51:37Z

2

Your setTimeout is not doing what you think it's doing. Here's what it's doing:

It encounters this statement:
```
setTimeout(this.loop(), 1);
```
It evaluates the first argument to setTimeout, this.loop(). It calls loop right there; it does not wait for a millisecond as you likely expected.
It calls setTimeout like this:
```
setTimeout(undefined, 1);
```

In theory, anyway. In reality, the second step never completes; it recurses indefinitely. What you need to do is pass a reference to the function rather than the returned value of the function:

setTimeout(this.loop, 1);

However, then this will be window on the next loop, not looper. Bind it, instead:

setTimeout(this.loop.bind(this), 1);

answered Jun 24, 2011 at 1:51

icktoofay

130k23 gold badges261 silver badges239 bronze badges

Comments

Jacob · Accepted Answer · 2011-06-24 01:44:49Z

1

setInterval might work. It calls a function every certain amount of milliseconds.

For Example

 myInterval = setInterval(myFunction,5000);

That will call your function (myFunction) every 5 seconds.

answered Jun 24, 2011 at 1:44

Jacob

3,9758 gold badges27 silver badges25 bronze badges

Comments

Craig White · Accepted Answer · 2011-06-24 02:01:18Z

1

why not have a loop checker using setInterval?

var loopWorking = false;
function looper(){
    loopWorking = true;
    //Do stuff
    loopWorking = false;
}
function checkLooper()
{
    if(loopWorking == false)
        looper();
}
setInterval(checkLooper, 100); //every 100ms or lower. Can reduce down to 1ms

edited Jun 24, 2011 at 2:01

answered Jun 24, 2011 at 1:46

Craig White

14.1k4 gold badges26 silver badges36 bronze badges

Comments

SpliFF · Accepted Answer · 2011-06-24 01:46:39Z

0

If you want to avoid recursion then don't call this.loop() from inside of this.loop(). Instead use window.setInterval() to call the loop repeatedly.

answered Jun 24, 2011 at 1:46

SpliFF

39.1k16 gold badges95 silver badges122 bronze badges

Comments

Mike Samuel · Accepted Answer · 2011-06-24 01:49:39Z

0

I had to hand-code continuation passing style in google-code prettify.

Basically I turned

for (var i = 0, n = arr.length; i < n; ++i) {
  processItem(i);
}
done();

into

var i = 0, n = arr.length;
function work() {
  var t0 = +new Date;
  while (i < n) {
    processItem(i);
    ++i;
    if (new Date - t0 > 100) {
      setTimeout(work, 250);
      return;
    } 
  }
  done();
}
work();

which doesn't hit any recursion limit since there are no recursive function calls.

answered Jun 24, 2011 at 1:49

Mike Samuel

121k30 gold badges230 silver badges255 bronze badges

Collectives™ on Stack Overflow

Create a JavaScript loop without while

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related