При нажатии на кнопку, которая обрабатывает событие более одного раза, setInterval сходит с ума?

Question

При нажатии на кнопку, которая обрабатывает событие более одного раза, setInterval сходит с ума?

0

Когда я нажимаю автоматическую кнопку (авто) более одного раза, которая обрабатывает метод setInterval, цвет Divs сходит с ума, теперь причина в том, что я здесь, чтобы знать. Это ДЕМО в jsfiddle ДЕМО ЦВЕТОВЫХ ДИВОВ С СТИМУЛЬТУРНЫМ МЕТОДОМ

Тело:

<div id="placeDiv1">ok</div>
<button id="b1" onclick="forward()">Forward</button>
<button id="b2" onclick="backward()">Backward</button>
<button id="b3" onclick="skip2()">skip2</button>
<button id="b4" onclick="automatic()">auto</button>
<button id="b5" onclick="stop()">stop</button>
<script>
    var myArray = ["black", "yellow", "green", "red", "blue", "blue", "black", "gray"];
    var myArray1 = ["yellow", "blue", "green", "red", "green", "blue", "black", "gray"];
    var i = 0;
    document.getElementById("placeDiv").style.backgroundColor = myArray[i];
    document.getElementById("placeDiv1").style.backgroundColor = myArray1[i];
    forward = function () {

        if (i == myArray.length - 1) {
            i = 0;
        } else {
            i = i + 1;
        }
        document.getElementById("placeDiv1").style.backgroundColor = myArray1[i];
        document.getElementById("placeDiv").style.backgroundColor = myArray[i];
    };
    skip2 = function () {

        if (i == myArray.length - 4) {
            i += 2;
            alert("This is the iterator " + i)
        } else if (i == 7) {
            i = 0
        } else {
            i = i + 1;
        };
        document.getElementById("placeDiv1").style.backgroundColor = myArray1[i];
        document.getElementById("placeDiv").style.backgroundColor = myArray[i];
    };
    backward = function () {

        if (i == 0) {
            i = myArray.length - 1;
            i = myArray1.length - 1;
        } else {
            i = i - 1;
        }

        document.getElementById("placeDiv1").style.backgroundColor = myArray1[i];
        document.getElementById("placeDiv").style.backgroundColor = myArray[i];
        //

    }
    automatic = function () {
        var m = setInterval(function () {
            if (i == myArray.length - 1) {
                i = 0;
            } else {
                i = i + 1;
            }
            document.getElementById("placeDiv1").style.backgroundColor = myArray1[i];
            document.getElementById("placeDiv").style.backgroundColor = myArray[i];
        }, 100);
        stop = function () {
            clearInterval(m)
        };
    };
</script>

CSS:

#placeDiv {
    position: absolute;
    left: 0px;
    width: 100px;
    height: 100px;
}
#placeDiv1 {
    position: absolute;
    left: 100px;
    width: 100px;
    height: 100px;
}
#b1 {
    position: absolute;
    top: 100px;
    left: 0px
}
#b2 {
    position: absolute;
    top: 100px;
    left: 80px
}
#b3 {
    position: absolute;
    top: 100px;
    left: 170px
}
#b4 {
    position: absolute;
    top: 100px;
    left: 270px
}
#b5 {
    position: absolute;
    top: 100px;
    left: 320px
}

user2887761 06 март 2014, в 09:39

Источник

0

Это может помочь jsfiddle.net/q32kG/1
Anand Jha 06 март 2014, в 08:36
0

Это кратчайший путь для того, что мне нужно. Я думаю, что это очень помогло.
user2887761 06 март 2014, в 09:11

Теги:

javascript

html

button

setinterval

2 ответа

0

Я нахожу ваш код немного запутанным, но, как я его вижу, вы устанавливаете интервал несколько раз. Каждый раз, когда вы нажимаете кнопку, он создает еще один таймер.

Что вы можете сделать, это установить переменную, чтобы проверить, работает ли таймер, например:

var running = false;

В вашей automatic() функции, установите running на true; и stop(), установите running на false.

Также в automatic() создайте только таймер, если он еще не запущен.

Все вместе мы имеем теперь:

running = false;
automatic=function(){
if (!running) {
  running = true;
 var m = setInterval(function(){if(i == myArray.length-1) 
     {i=0;}
     else
     {i=i+1;}
     document.getElementById("placeDiv1").style.backgroundColor = myArray1[i];
   document.getElementById("placeDiv").style.backgroundColor = myArray[i];},100);   
}     
     stop=function(){
clearInterval(m);
running = false};

Это только я, или вы тоже не закрываете функцию?

Scimonster 06 март 2014, в 06:03

0

Я попробовал ваш код, и он не работал, но концепция нестабильна.
user2887761 06 март 2014, в 09:09

Ещё вопросы

Это кратчайший путь для того, что мне нужно. Я думаю, что это очень помогло.
Я попробовал ваш код, и он не работал, но концепция нестабильна.

Anand Jha · Accepted Answer · 2014-03-06T05-49-00.000Z

Просто обновите скрипт, как

  var m=null;   
  automatic=function(){
   clearInterval(m);
   m = setInterval(function(){
     if(i == myArray.length-1) 
         {i=0;}
         else
         {i=i+1;}
         document.getElementById("placeDiv1").style.backgroundColor = myArray1[i];
       document.getElementById("placeDiv").style.backgroundColor = myArray[i];
  },100);

 stop=function(){
    clearInterval(m);
 };

Проверить скрипт

Вам нужно убить setinterval, когда вы вызываете функцию automatic а также нужно определить var m вне функции