CODEWITHSUNDEEP
javascript
Joshua
Joshua

Reputation: 946

Javascript "Maximum Call Size Stack Exceeded"

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!

Upvotes: 0

Views: 213

Answers (1)

Wio
Wio

Reputation: 1251

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);

}

Upvotes: 2

Related Questions