Javascript“超出最大调用大小堆栈”答案

【问题标题】：Javascript "Maximum Call Size Stack Exceeded"Javascript“超出最大调用大小堆栈”
【发布时间】：2014-07-08 00:59:02
【问题描述】：

我正在编写一个从 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% 时停止该功能。但是我仍然收到错误，现在我对为什么有点困惑。任何帮助都会很棒！

【问题讨论】：

Javascript 是单线程的。只要while 循环正在运行，setTimeout 函数就永远不会有机会运行。
嗯。我可以使用任何其他循环来解决这个问题吗？谢谢
最好的解决方案是利用 CSS 过渡而不是尝试在 Javascript 中进行。
见stackoverflow.com/questions/12980955/…

标签： javascript

【解决方案1】：

你需要递归调用slideLockscreenUp在setTimeout回调函数中，否则在第一个setTimeout回调函数被调用之前会被多次调用。

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

function slideLockscreenUp(){

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

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

}

【讨论】：