Question

该网站是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;
    }
}

请告诉我如何修复。谢谢！

Answer 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是否被用作布尔指示符（至少如果你只是快速锁定它的话）。

Answer 2

setTimeout函数不会暂停，它只是安排在指定的延迟后执行函数（它的第一个参数），然后立即返回。因此，启动一大堆超时并不是那么有用。您希望setTimeout回调呼叫setTimeout以启动另一个计时器。您可以使用函数而不是字符串作为setTimeout的第一个参数。

Javascript延迟while while循环

2 个答案: