이벤트를 두 번 이상 처리하는 버튼을 클릭하면 setInterval이 이상하게 들립니까?

Question

setInterval 메서드를 처리하는 자동 단추 (자동)를 두 번 클릭하면 색상 조각이 빠르게 움직입니다. 이제 내가 알기로 여기에 이유가 있습니다. 이 jsfiddle DEMO OF COLOR DIVS WITH SETINTERVAL METHOD

몸의 데모입니다 :

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

Answer 1

는 것처럼 스크립트를 업데이트

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

확인 Fiddle

당신은 기능 automatic를 호출 할 때 setInterval을 죽일 필요도 기능

Answer 2

내가 조금 혼란 코드를 찾는거야,하지만 난 그것을 볼 수있는 방법은, 당신이 설정된다 간격. 단추를 누를 때마다 다른 타이머가 작성됩니다. 타이머가 실행과 같이되어 있는지 확인하는 변수 설정 당신이 할 수있는

: 당신의 automatic() 기능에

이 var running = false;

, true에 running 설정을; 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}; 

인가, 또는 당신은뿐만 아니라 제대로 기능을 폐쇄되지 않습니다

모두 함께, 우리는 지금이?