1

В примере, при нажатии на кнопку_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);
}
...
2
  • 1
    clearInterval(set - 1); ???
    – user176262
    27 янв 2016 в 14:46
  • @Igor, вот такие фантазии, sorry.
    – Alex
    27 янв 2016 в 14:50

2 ответа 2

1
function fn(x) {

  var div = document.getElementById('mydiv');

  if (x !== 'start') {
    clearInterval(div.timer);
    div.timer = null;
    div.flag = false;
    document.getElementById('mydiv').style.background = '#ccc';
  } else {
    if (!div.timer) {
      div.timer = setInterval(function() {
        var div1 = document.getElementById('mydiv');
        div1.flag = !div1.flag;
        div1.style.background = div1.flag ? 'red' : '#ccc';
      }, 700);
    }
  }

}
2
  • Спасибо, Вы мне помогли.
    – Alex
    27 янв 2016 в 15:10
  • @Alex пожалуйста, не пишите комментарии в виде "спасибо". Когда у Вас будет достаточно привилегий, Вы сможете голосовать за понравившийся Вам вопрос, что на сайте Stack Overflow на русском является способом сказать спасибо.
    – Alex
    27 янв 2016 в 15:54
0

Вариант, не такой точный, как показали выше, но всё-же :

function fn(x){

   var flag = false, set = setInterval(function () {

   if (x !=='start') {
      for(var i=1; i<=set; i++) clearInterval(i);
   }
   var color = flag ? 'red' : '#ccc';
   document.getElementById('mydiv').style.background = color;
   flag = !flag;
   }, 700);
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.