Question

希望我能对此做得体面的解释。我是显式使用浏览器对象模型的新手。我的程序应该创建一个新窗口，然后围绕屏幕边缘（顺时针）移动窗口。我相信时间安排有些不对劲，因为当我运行它时，窗口开始在屏幕顶部向右移动，然后加速到刚到处弹起的地步。这是我所拥有的：

<html>
<head>
    <script>
        var x = 0;
        var y = 0;
        var moveX = true;
        var moveY = false;
        var aWindow;
        var timer;
        function openWindow(){
            aWindow = window.open("", "", "width=400, height=200");
            aWindow.document.write("This is my new window");
        }

        function closeWindow(){
            if(aWindow){
                aWindow.close();
            }
        }


        function moveWindow(){
            if(aWindow){
                if(moveX){
                    x += 100;
                }
                if(moveY){
                    y += 100;
                }
                if(x == 1200){
                    moveX = false;
                    moveY = true;
                    x *= -1;        //Sets up x so it will move back across the screen backwards
                }
                if(y == 700){
                    moveX = true;
                    moveY = false;
                    y *= -1;        //Sets up y so it will move back up the screen
                }
                aWindow.moveTo(x, y);
                timer = setInterval(moveWindow, 1000)
            }
        }

        function stopMove(){
            clearInterval(timer);
        }
    </script>
</head>

<body>
    <button onclick="openWindow();">Open</button>
    <button onclick="closeWindow();">Close</button>
    <button onclick="moveWindow();">Move</button>
    <button onclick="stopMove();">Stop moving</button>
</body>
</html>

Answer 1

问题在于，每次调用moveWindow时，它都会设置另一个计时器间隔来运行。因此，moveWindow呼叫的数量不断增加。

您应该仅在setInterval函数中使用一次startMoving。

您可以将onclick="moveWindow()"的移动按钮替换为onclick=startMoving()函数，以调用setInterval 一次。

我正在创建的窗口在屏幕上四处跳跃，为什么？

1 个答案: