javascript - 带while循环的Java语言延迟

该网站是here，我正在尝试通过在用户单击按钮时使用Javascript移动背景的位置来创建动画按钮。但是，该按钮不是缓慢滚动，而是跳到循环的结尾。这是代码：

var x=1, y=0, z=1;

function animate () {
    document.getElementById("switch").style.backgroundPosition = y + 'px 0px';
}

function toggle() {
    // check if button is on
    if (x==1) {
        //As long as image is not yet in place, move the background
        while (y>-37) {
            //Delay each move by 500 and increase the delay
            setTimeout("animate()",500*z);
            --y;++z;
        }
        --x;
        //reset increasing timer
        z=1;
    }
    // check if button is off
    else if (x==0) {
        //As long as image is not yet in place, move the background
        while (y<0) {
            //Delay each move by 500 and increase the delay
            setTimeout("animate()",500*z);
            ++y;++z;
        }
        ++x;
        //reset increasing timer
        z=1;
    }
}

请让我知道如何解决。谢谢！

最佳答案

这有效：

var on = true,
    sw = document.getElementById("switch"),
    stop, y = 0,
    dir, to;

function animate() {
    sw.style.backgroundPosition = y + 'px 0px';
    y += dir;
    if (y != stop) {
        to = setTimeout(animate,25);
    }
}

function toggle() {
    if (to) {
        clearTimeout(to);
    }
    if (on) {
        dir = -1;
        stop = -38;
    }
    else {
        dir = 1;
        stop = 2;

    }
    to = setTimeout(animate, 25);
    on = !on;
}

DEMO

不知道这是否是最好的方法。

注意：您必须在body.onload事件处理程序中运行代码，或者将其放在页面底部。

您也可以尝试使用步长和超时时间....我想说些其他的话，但是我忘记了;）

另一个注意事项：您应该始终使用表达性变量名称。例如。尚不清楚将x用作布尔指示符（至少在您仅对其具有快速锁定的情况下才如此）。