Как отменить первую итерацию функции, если функция активирована - PullRequest
Новая
       7

Как отменить первую итерацию функции, если функция активирована

0 голосов
/ 21 февраля 2011

У меня есть функция, выполнение которой занимает около 10 секунд, и она прерывается, если реактивируется до завершения первой итерации - Она действует как текстовый фейдер - JQuery - не вариант, я хочу использовать чистый JS

Моя функция: 

//Text fading effect
function fadeText() {
    var hex1 = 153,
    hex2 = 204,
    hex3 = 51;
    function innerFade() {
        if (hex1 >= 30) {
            hex1 -= 1;
            document.getElementById('confirmation').style.color = "rgb(" + hex1 + "," + hex2 + "," + hex3 + ")";
        }
        if (hex2 >= 30) {
            hex2 -= 1;
            document.getElementById('confirmation').style.color = "rgb(" + hex1 + "," + hex2 + "," + hex3 + ")";
        }
        if (hex3 >= 30) {
            hex3 -= 1;
            document.getElementById('confirmation').style.color = "rgb(" + hex1 + "," + hex2 + "," + hex3 + ")";
        }
        setTimeout(innerFade, 20);
    }
    innerFade();
}

Это активируется при нажатии кнопки, я хочу, чтобы первая итерация отменила или установила innerHTML элемента div, которому текст был присвоен innerHTML="";, если он активируется снова до завершения анимации.

Ответы [ 2 ]

1 голос
/ 21 февраля 2011

Большой Редактировать: 

//Set colour function
function setColor(elementName, r, g, b) {
    document.getElementById(elementName).style.color = "rgb(" + r + "," + g + "," + b + ")";
}

//Text fading effect

var animationActive = false;

function fadeText() {

    if (animationActive) return;

    animationActive = true;

    var hex1 = 153,
    hex2 = 204,
    hex3 = 51;

    function innerFade() {

        var rDone, gDone, bDone;

        if (hex1 >= 30) {
            hex1 -= 1;
            setColor('confirmation', hex1, hex2, hex3);
        } else {rDone = true;}

        if (hex2 >= 30) {
            hex2 -= 1;
            setColor('confirmation', hex1, hex2, hex3);
        } else {gDone = true;}

        if (hex3 >= 30) {
            hex3 -= 1;
            setColor('confirmation', hex1, hex2, hex3);
        } else {bDone = true;}

        if (rDone && gDone && bDone) {
            animationActive = false;
        }

    }
    setTimeout(innerFade, 20);

}
0 голосов
/ 21 февраля 2011

Вы можете отключить кнопку, чтобы предотвратить повторный вызов функции:

HTML: 

<button onclick="fadeText(this)"> Fade text </button>

JavaScript: 

function fadeText(btn) {
    var elm = document.getElementById('confirmation'),
        c = [153, 204, 51];

    function loop() {
        for (var i = 0; i < c.length; i++) {
            if (c[i] >= 30) c[i] -= 1;
        }
        elm.style.color = 'rgb(' + c[0] + ',' + c[1] + ',' + c[2] + ')';
        return c[0] < 30 && c[1] < 30 && c[2] < 30 ? 
                btn.disabled = false : setTimeout(loop, 20);
    }

    btn.disabled = true;
    loop();
}

Демонстрация в реальном времени: http://jsfiddle.net/nKV7A/

...