В примере, при нажатии на кнопку_2, код на базе setInterval запускает смену цвета дива. Если нажимать поочередно : кнопка_2, затем кнопка_3, то, похоже, запускает и
останавливает смену цвета без проблем. Если нажимать хаотично, - не работает ...
Как сделать, чтобы при нажатии кнопки_3 всегда останавливалось на сером цвете (#ccc) и
поправить косяк, при хаотичном нажатии?
function fn(x) {
var flag = false;
var set = setInterval(function() {
var color = flag ? 'red' : '#ccc';
document.getElementById('mydiv').style.background = color;
flag = !flag;
n += 1;
}, 700);
//
if (x !== 'start') {
clearInterval(set - 1);
clearInterval(set);
}
}
#mydiv {
width: 100px;
height: 100px;
background: #ccc;
}
</br>
<input type="button" value="1: _()." style="width:100px; height:28px; font-size:12px" onclick="fn();">
</br>
<input type="button" value="2: _('start')." style="width:100px; height:28px; font-size:12px" onclick="fn('start');">
</br>
<input type="button" value="3: _('stop')." style="width:100px; height:28px; font-size:12px" onclick="fn('stop');">
</br>
<div id="mydiv"></div>
upd : чтобы останавливалось на сером цвете, поместил clearInterval выше :
var set = setInterval(function () {
if (x !=='start') {
clearInterval(set-1);
clearInterval(set);
}
...