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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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