JQuery Rapid Class Switcher

Question

http://jsfiddle.net/JamesKyle/re73T/

Попытка создать переключатель классов, который будет делать следующее:

1. On Load - случайным образом выбрать один из 10 классов для добавления к элементу
2. Во время зависания - быстрое (каждые 0,4 с) переключение между 10 классами
3. On mouseOut - оставить текущий класс активным

Я пробовал несколько способов сделать это, ни один из которых не сработал.

Как вы думаете, что будет лучшим способом сделать это?

Answer 1

http://jsfiddle.net/re73T/9/

// On Load
//     Randomly select 1 of 10 classes


function removeAllClasses() {
    var i;
    for (i = 0; i <= 10; i += 1) {
        $('.element').removeClass('class' + i);
    }
}

function setRandomClass() {
    var cls = "class"+Math.floor(Math.random() * (10 - 1 + 1) + 1);
    $('.element').addClass(cls);
}

$(document).ready(function() {
    removeAllClasses(); // just in case
    setRandomClass();
});

// While Hovering
//    every 0.4s 
//        switch to the next class out of ten
// I want it to leave the current class when you mouseout
var IS_HOVERING = false;
$('.element').hover(function() {
    IS_HOVERING = true;
}, function() {
    IS_HOVERING = false;
});

function onTimeout() {
    if (IS_HOVERING) {
        removeAllClasses();
        setRandomClass();
    }
    setTimeout(onTimeout, 400);
}

setTimeout(onTimeout, 400);

Answer 2

Вот другая реализация, которая работает в вашем jsFiddle: http://jsfiddle.net/jfriend00/b7A4a/. Эта также гарантирует, что случайно сгенерированное имя класса отличается от предыдущего, поэтому цвет фактически меняется каждые 400 мс, а не пропускает изменение 1из 10 раз, потому что он генерирует то же значение цвета, что и у него.

// get unique random class that's different than what is currently being used
function getRandomClass(prior) {
    var r;
    do {
        r = "class" + (Math.floor(Math.random() * 10) + 1); 
    } while (prior && prior.match(new RegExp("\\b" + r + "\\b")));
    return(r);
}

// initialize the current class
$(".element").addClass(getRandomClass());

// upon hover, start the timer, when leaving stop the timer
$(".element").hover(function() {
    var self = this;
    if (this.intervalTimer) {
        clearInterval(this.intervalTimer);
        this.intervalTimer = null;
    }
    this.intervalTimer = setInterval(function() {
        var c = self.className;
        self.className = c.replace(/\bclass\d+\b/, getRandomClass(c));
    }, 400);
}, function() {
    clearInterval(this.intervalTimer);
    this.intervalTimer = null;
});