Задержка JavaScript с помощью цикла - PullRequest
Новая
       4

Задержка JavaScript с помощью цикла

0 голосов
/ 28 апреля 2011

сайт здесь Я пытаюсь создать анимированную кнопку, перемещая положение фона, используя 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;
    }
}

Пожалуйста, дайте мне знать, как исправить.Спасибо!

Ответы [ 2 ]

3 голосов
/ 28 апреля 2011

Это работает: 

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 используется в качестве логического индикатора (по крайней мере, если у вас есть только быстрая блокировка на нем).

1 голос
/ 28 апреля 2011

Функция setTimeout не приостанавливается, она просто выполняет функцию (ее первый аргумент) после указанной задержки, а затем сразу же возвращается. Таким образом, запуск целого ряда тайм-аутов не так уж полезен. Вы хотите, чтобы обратный вызов setTimeout вызывал setTimeout для запуска другого таймера. И вы можете использовать функцию вместо строки в качестве первого аргумента для setTimeout.

...