Javascript "Maximum Call Size Stack Exceeded"

Question

I'm coding a lock screen which takes "inspiration" from Windows 8. When the user clicks the image it slides up to reveal the password input field etc. I want the lock screen to "transition" or "animate" instead of just changing the display properties.

I've set up an event handler for the click which calls a function called SlideLockscreenUp. It's when I run this that I'm met with the "Maximum Call Size Stack Exceeded" error. Initially my code was:

function slideLockscreenUp(){

    t = setTimeout(function(){
        ls.style.top = '-1%';
    }, 100);

    slideLockscreenUp();
}

When I first got the error I assumed it was because I hadn't set any condition for the recursion to stop, hence it would continue for ever forcing the browser to interfere.

So this is what I came up with next:

            function slideLockscreenUp(){

            do{
                t = setTimeout(function(){
                    ls.style.top = '-1%';
                }, 10);

                slideLockscreenUp();
            } while(ls.style.top < "-100%" );

        }

As you can see I test the display properties to stop the function when the position:top is -100%. However I'm still getting the error and now I'm slightly confused as to why. Any help would be great!

Javascript is single-threaded. The setTimeout function will never get a chance to run as long as the while loop is running. — Barmar
– Barmar, Commented Jul 8, 2014 at 1:02
Hmm. Is there any other loop I could use that would get around this? Thanks — Joshua
– Joshua, Commented Jul 8, 2014 at 1:03
The best solution is to make use of CSS transitions rather than trying to do it in Javascript. — Barmar
– Barmar, Commented Jul 8, 2014 at 1:07

Wio · Accepted Answer · 2014-07-08 01:07:20Z

2

You need the recursive call slideLockscreenUp to be inside the setTimeout callback function, otherwise it will be called multiple times before the first setTimeout callback is even called.

I suggest that you use setInterval and clearInterval instead of calling setTimeout multiple times.

function slideLockscreenUp(){

    t = setInterval(function(){
        ls.style.top = '-1%';

        if (/* exit condition */) {
            clearInterval(t);
        }
    }, 100);

}

answered Jul 8, 2014 at 1:07

Wio

1,25111 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

Javascript "Maximum Call Size Stack Exceeded"

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related