Привожу код, в котором идет смена цвета дива по кругу в цикле : зеленый/красный/желтый. В примере такой цикл запускается по кнопке. Как правильно сделать остановку и старт такой смены цвета, чтобы не накладывалось выполнение цикла?
function fun_1(s) { // s -> start/stop;
var timeoutID = '';
for (var i = 1; i < 4; i++) {
timeoutID = setTimeout(function(x) { return function() {
var c = '', doc = document.getElementById('sss');
if(x==1){c='green'};
if(x==2){c='red'};
doc.style.background = c;
if(x==3){
c='yellow';
doc.style.background = c;
fun_1();
};
}; }(i), 1200*i);
}
}
// стоп
function fun_2() {
// fun_1('stop');
// clearTimeout(timeoutID);
}
// старт
function fun_3() {
// fun_1('start');
//
}
<input type="button" value="1: Запуск : зеленый/красный/желтый по кругу." style="width:50%; height:26px; font-size:12px" onclick="fun_1()">
</br>
<input type="button" value="2: Стоп." style="width:50%; height:26px; font-size:12px" onclick="fun_2()">
</br>
<input type="button" value="3: Старт." style="width:50%; height:26px; font-size:12px" onclick="fun_3()">
</br>
<div id="sss" style="width:50%; height:30px; background:#ccc"> </div>
четыре
таймера? у вас же только один активный цвет