Question

当我多次点击自动按钮（自动），处理setInterval方法时，颜色Div快速疯狂，现在原因就是我在这里要知道的。这是jsfiddle中的DEMO 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 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};

只是我，还是你没有正确关闭这个功能？

Answer 2

只需像

那样更新脚本

  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并且还需要在函数外定义var m

当点击处理事件多次的按钮时，setInterval会变得疯狂吗？

2 个答案: