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

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

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

function slideLockscreenUp(){

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

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

}

Javascript＆＃34;超出最大通话大小堆栈＆＃34;

1 个答案: