Setinterval Изменение цвета ячейки - PullRequest
Новая
       6

Setinterval Изменение цвета ячейки

0 голосов
/ 27 марта 2012

Я пытаюсь изменить цвет двух ячеек в таблице HTML после каждых 250 мс.

http://jsfiddle.net/m4n07/DYP69/

Если я раскомментирую второй блок кода setInterval, изменение цвета прекращается даже для первого.

Я бы хотел изменить цвет в ячейке 1 и 2 одновременно. Спасибо

Ответы [ 3 ]

0 голосов
/ 27 марта 2012

Вы используете тот же флаг, что, вероятно, приводит к некоторой блокировке.Самое простое решение для вас - просто добавить еще один флаг для второй версии - но разве это не будет намного приятнее с одной интервальной функцией?Если бы я был вами, я бы, вероятно, также захотел бы кэшировать элементы вместо того, чтобы выполнять поиск в каждом интервале.

Обновление;

Из (удаленного) комментария выХотите добавить элементы динамически в одну и ту же функцию интервала?Я написал небольшой плагин для вас (да, медленный и скучный день на работе).Вы можете добавлять элементы и изменять имена классов CSS во время выполнения или даже останавливать интервал.Только протестировано в FireFox, но это стандарт JS и должно работать в большинстве браузеров ...

файл JavaScript 

(function (window, document, undef) {

    var CB = {};

    if (typeof window.CB !== typeof undef) {
        return;
    }

    CB = function () {

        var elements   = [],
            classes    = ['first-round', 'second-round'],
            intervalId = 0;


        var flag     = 0;
        var switcher = function () {

            for (var i = 0; i < elements.length; i++) {
                elements[i].className = classes[flag];
            }

            flag = 1 - flag;

        };


        return {

            setClasses: function (first, second) {

                classes = [first, second];

            },

            addElement: function (element) {

                elements.push(element);

            },

            init: function (element, firstClass, secondClass) {

                this.addElement(element);
                this.setClasses(firstClass, secondClass);

                return this;

            },

            start: function (interval) {

                intervalId = setInterval(switcher, interval);

            },

            stop: function () {

                clearInterval(intervalId);

            }

        }

    }();

    window.CB = CB;

})(window, document);

HTML-тестовая страница с использованиемпример

Тест добавляет два дополнительных элемента во время выполнения (время ожидания составляет 5 секунд), а также изменяет классы 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />

        <style>

            .container {
                width: 600px;
                margin: 50px auto;
            }
                .container > div {
                    width: 300px;
                    height: 50px;
                    float: left;
                }
                .container .clear {
                    clear: both;
                    float: none;
                    width: 0;
                    height: 0;
                }

            .first-class {
                background-color: red;
            }
            .second-class {
                background-color: blue;
            }

            .new-first-class {
                background-color: black;
            }
            .new-second-class {
                background-color: grey;
            }

        </style>

    </head>
    <body>

        <div class="container">
            <div id="Id1">

            </div>

            <div id="Id2">

            </div>
            <div class="clear"></div>
        </div>

        <div class="container">
            <div id="Id3">

            </div>
            <div id="Id4">

            </div>
            <div class="clear"></div>
        </div>

        <script src="CB.js"></script>
        <script>

            window.onload = function () {

                CB.init(document.getElementById('Id1'), 'first-class', 'second-class');
                CB.addElement(document.getElementById('Id2'));

                CB.start(120);

                setTimeout(function () {

                    CB.addElement(document.getElementById('Id3'));
                    CB.addElement(document.getElementById('Id4'));
                    CB.setClasses('new-first-class', 'new-second-class');

                }, 5000);

            };

        </script>

    </body>
</html>
0 голосов
/ 27 марта 2012

Попробуйте это. 

var flag = true;

setInterval(
function changeColor () {
    if(flag==true){
        document.getElementById("Id1").style.background="red";
        document.getElementById("Id2").style.background="red";
        flag=false;
    }
    else if (flag==false){
    document.getElementById("Id1").style.background="blue";
    document.getElementById("Id2").style.background="blue";
    flag = true;
    }
}, 110);
0 голосов
/ 27 марта 2012

Из небольшого изменения вашего кода: http://jsfiddle.net/DYP69/6/

Поскольку вы сказали, что хотите, чтобы они меняли цвета одновременно, вы можете использовать только один интервал: 

var flag = true;

setInterval(
    function(){
        if (flag) {
            document.getElementById("Id1").style.background = "red";
            document.getElementById("Id2").style.background = "blue";
        }
        else{
            document.getElementById("Id1").style.background = "blue";
            document.getElementById("Id2").style.background = "red";
        }
    flag = !flag;
    }, 250);​

Редактировать: прибранокод вверх.

...