When clicked on a button that handles event more than one time setInterval goes crazy?

Question

When I click in the automatic button (auto) more than once, which handles the setInterval method, the color Divs go crazy fast, now the reason is what I'm here for to know. This is the DEMO in jsfiddleDEMO OF COLOR DIVS WITH SETINTERVAL METHOD

Body:

<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

Just update the script like

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

Check Fiddle

You need to Kill the setinterval when you call the function automatic and also need to define var m outside the function

Answer 2

I'm finding your code a bit confusing, but the way i see it, you are setting the interval multiple times. Each time you click the button, it creates another timer.

What you can do is set a variable to check if the timer is running, like so:

var running = false;

In your automatic() function, set running to true; and in stop(), set running to false.

Also in automatic(), only create the timer if it's not already running.

All together, we now have:

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

Is it just me, or are you not closing the function properly as well?