使用 while 循环实现 JavaScript 延迟

发布于 2024-11-03 21:07:52 字数 1026 浏览 3 评论 0原文

该网站位于此处我正在尝试通过在用户访问时使用 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;
    }
}

请让我知道如何修复。谢谢！

原文

the site is here I'm trying to create an animated button by moving the position of the background using Javascript when the user clicks the button. However, instead of slowly scrolling, the button jumps to the end of the loop. Here's the code:

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;
    }
}

Please let me know how to fix. Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

放低过去 2024-11-10 21:07:52

这有效：

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 是否用作布尔指示器（至少如果您仅快速锁定它）。

This works:

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

Don't know if it is the best way though.

Note: You either have to run the code in the body.onload event handler or put it at the bottom of the page.

You can also try to play with the step size and the timeout time.... ~~there was something else I wanted to say, but I forgot ;)~~

Another note: You should always use expressive variable names. E.g. It was not clear that x is used as a boolean indicator (at least not if you only have a quick lock at it).

回复收藏 0 原文

笨死的猪 2024-11-10 21:07:52

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