JavaScript "Maximum Call Size Stack Exceeded"

Question

我正在编写一个锁屏，它的“灵感”来自 Windows 8。当用户单击图像时，它会向上滑动以显示密码输入字段等。我希望锁屏能够“过渡”或“动画”只是更改显示属性。

我已经为单击设置了一个事件处理程序，该处理程序调用名为 SlideLockscreenUp 的函数。当我运行这个时，我遇到了“超出最大调用大小堆栈”错误。最初我的代码是:

function slideLockscreenUp(){

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

    slideLockscreenUp();
}

当我第一次收到错误时，我认为这是因为我没有设置任何停止递归的条件，因此它将永远继续迫使浏览器干扰。

这就是我接下来想到的:

            function slideLockscreenUp(){

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

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

        }

如您所见，我测试了显示属性，以在position:top 为-100% 时停止该功能。但是我仍然收到错误，现在我对为什么有点困惑。任何帮助都会很棒!

Answer 1

您需要在 setTimeout 回调函数内部递归调用 slideLockscreenUp，否则它将在第一个 setTimeout 回调之前被多次调用甚至被称为。

我建议您使用setInterval和clearInterval，而不是多次调用setTimeout。

function slideLockscreenUp(){

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

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

}