Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как узнать какой светофор сейчас обрабатываеться ? (https://javascript.ru/forum/events/42267-kak-uznat-kakojj-svetofor-sejjchas-obrabatyvaetsya.html)

eko24 19.10.2013 19:26

Как узнать какой светофор сейчас обрабатываеться ?
 
Доброго времени суток !
Есть такой вопрос.
Демо
У меня есть 13 светофоров, которые отображаются в тегаx <span>.
Я хочу узнать какой именно спан сейчас обрабатываеться и узнать его цвет.
Если можно что бы результат выводился через alert().
Заранее спасибо

BETEPAH 19.10.2013 20:23

Цитата:

Сообщение от eko24
Я хочу узнать какой именно спан сейчас обрабатываеться

не совсем понятно, что значит "сейчас". Если на каждый декремент цифры в каждом спане выводить алерт, это будет 13 алертов в секунду

eko24 19.10.2013 20:37

Я буду на канвасе отрисовывать эти светофоры.
То есть мне нужно знать у какого светофора какой цвет.
Отрисовка скорее всего будет происходить внутри функции визуализации светофоров.
Просто у меня сейчас есть массив с фазами для каждого светофора (спана), и еще будет массив с координатами этого светофора на канвасе, например:
traffic_locations = [[x1:10,y1:10,x2:20,y2:20],[x1:110,y1:110,x2:120,y2:120]];

И внутри визуализации переменная-итератор будет обращаться к массиву с локациями и эта переменная должна соотвествовать светофору который отображаеться и еще получать цвет этого светофора.
как то так

BETEPAH 19.10.2013 20:53

Цитата:

Сообщение от eko24
получать цвет этого светофора

получать цвет - это несложно. Я так и не понял цвет какого светофора хотите получать.
Вот, например, получатель цвета первого светофора - http://jsfiddle.net/BETEPAH/cNQWW/

eko24 19.10.2013 21:07

Здесь итет отображение каждого светофора:
for (var a = 0, f; a < traffic_lights.length; a++) {
        var g = traffic_lights[a];
        f = $("#c" + a);
        (function (a, d) {
            var b = 0,
                time = 0;
            return function s() {
                time || (a.css({"background-color": d[b].color}), time = d[b].time, b = ++b % d.length);
                a.html(time);
                time--;
                window.setTimeout(s, 1e3);
            }
        })(f, g)();
    }

Еще у меня есть массив с координатами для каждого светофора:
traffic_locations = [[x1:10,y1:10,x2:20,y2:20],[x1:110,y1:110,x2:120,y2:120]];

Каждый раз как будет изменяться цвет в span будет прорисовываться этот светофор на канвасе.
Я себе вижу это как то так:
traffic_locations = [[x1:10,y1:10,x2:20,y2:20],[x1:110,y1:110,x2:120,y2:120]];
for (var a = 0, f; a < traffic_lights.length; a++) {
        var g = traffic_lights[a];
        var tl = traffic_locations[a];//получаем расположение на канвасе светофора, который сейчас обрабатываеться
        f = $("#c" + a);
        (function (a, d) {
            var b = 0,
                time = 0;
            return function s() {
                time || (a.css({"background-color": d[b].color}), time = d[b].time, b = ++b % d.length);
                a.html(time);
                time--;
                canvas.fillRect(tl.x1,tl.y1,tl.x2,tl.y2,d[b].color);//отрисовываем этот светофор на канвасе
                window.setTimeout(s, 1e3);
            }
        })(f, g)();
    }

BETEPAH 19.10.2013 21:46

Если я правильно понял, нужно фиксировать изменения цвета каждого светофора? Так? http://jsfiddle.net/BETEPAH/cNQWW/3/

eko24 19.10.2013 22:08

Именно оно.
Только у меня мозги кипят, когда я пробую глазами выискать айдишник светфора.
Поможете это встроить под этот скрипт:
traffic_locations = [[x1:10,y1:10,x2:20,y2:20],[x1:110,y1:110,x2:120,y2:120]];
for (var a = 0, f; a < traffic_lights.length; a++) {
        var g = traffic_lights[a];
        var tl = traffic_locations[a];//получаем расположение на канвасе светофора, который сейчас обрабатываеться
        f = $("#c" + a);
        (function (a, d) {
            var b = 0,
                time = 0;
            return function s() {
                time || (a.css({"background-color": d[b].color}), time = d[b].time, b = ++b % d.length);
                a.html(time);
                time--;
                canvas.fillRect(tl.x1,tl.y1,tl.x2,tl.y2,d[b].color);//отрисовываем этот светофор на канвасе
                window.setTimeout(s, 1e3);
            }
        })(f, g)();
    }

?

BETEPAH 19.10.2013 22:26

Цитата:

Сообщение от eko24
Только у меня мозги кипят, когда я пробую глазами выискать айдишник светфора

десятая строка в Вашем последнем коде
time || ...

я ее немного переделал, посмотрите код на фидле
айдишник получаем так
a.attr('id')

eko24 19.10.2013 22:53

И еще вопрос из любопытности:
что означает эти две линии ||:
time || (a.css({"background-color": d[b].color}), time = d[b].time, b = ++b % d.length);

Никак не могу додуматься...

BETEPAH 19.10.2013 23:00

Цитата:

Сообщение от eko24
что означает эти две линии ||:

Это рони любит сокращать код :)
Логическое "или" (эти две линии) обрабатывается слева направо и прерывается, когда встречает первое истинное условие.
В данном случае, этот код проверяет есть ли значение у time, отличное от нуля. Если time == 0 или time == null или time == undefined или time == false, код идет дальше и выполняет то, что находится за двумя линиями (меняет цвет фона, устанавливает счетчик времени...)
А если у time есть значение, то что идет за двумя линиями, игнорируется

К сведению, если встретите два амперсанда, они обрабатываются до первого ложного значения.


Часовой пояс GMT +3, время: 02:30.