Как узнать какой светофор сейчас обрабатываеться ?
 

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

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

Я буду на канвасе отрисовывать эти светофоры.
То есть мне нужно знать у какого светофора какой цвет.
Отрисовка скорее всего будет происходить внутри функции визуализации светофоров.
Просто у меня сейчас есть массив с фазами для каждого светофора (спана), и еще будет массив с координатами этого светофора на канвасе, например:

traffic_locations = [[x1:10,y1:10,x2:20,y2:20],[x1:110,y1:110,x2:120,y2:120]];

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

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

Здесь итет отображение каждого светофора:

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)();
    }

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

Именно оно.
Только у меня мозги кипят, когда я пробую глазами выискать айдишник светфора.
Поможете это встроить под этот скрипт:

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)();
    }

?

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

time || ...

я ее немного переделал, посмотрите код на фидле
айдишник получаем так

a.attr('id')

И еще вопрос из любопытности:
что означает эти две линии ||:

time || (a.css({"background-color": d[b].color}), time = d[b].time, b = ++b % d.length);

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

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

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