即使在 c 之后，Javascript 函数也会继续执行

Question

我正在构建一个代码，其中我有 3 个 div，每个包含 2 个动画进度条。

我也有 3 个按钮。在每一个上运行一个特定的函数，隐藏 3 个 div 中的 2 个。

这就是问题所在，当我单击一个按钮时，单个 div 显示带有动画栏。但是，当我在第一个进度条动画完成之前单击第二个按钮时。在第二个按钮上，单击第一个功能应该会停止，但它会继续运行并使进度条看起来在摇晃。

如果我在 javascript 中放置另一个函数并单击运行其中一个...第一个函数应该结束但它没有发生。

<script type="text/javascript">
var elem = document.getElementById("myBar"); 
var elem2 = document.getElementById("myBar2");
var elem41 = document.getElementById("myBar41");
var elem3 = document.getElementById("myBar3");
var elem4 = document.getElementById("myBar4");
var elem5 = document.getElementById("myBar5");
var elem42 = document.getElementById("myBar42");
var elem6 = document.getElementById("myBar6");
var elem7 = document.getElementById("myBar7");
var elem43 = document.getElementById("myBar43");
var elem8 = document.getElementById("myBar8");
var elem9 = document.getElementById("myBar9");
var elem44 = document.getElementById("myBar44");
var elem10 = document.getElementById("myBar10");
var elem11 = document.getElementById("myBar11");
var elem12 = document.getElementById("myBar12");
var elem13 = document.getElementById("myBar13");
var elem14 = document.getElementById("myBar14");
var elem15 = document.getElementById("myBar15");
var elem45= document.getElementById("myBar45");

function move() {
    var width = 0;
    var id = setInterval(frame, 0);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem.style.width = width + '%'; 
            elem.innerHTML = width * 1 + '%';
        }
    }
}
function move2() {
    var width = 0;
    var id = setInterval(frame, 2);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem2.style.width = width + '%'; 
            elem2.innerHTML = width * 1 + '%';
        }
    }
}
function move3() {
    var width = 0;
    var id = setInterval(frame, 6);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem3.style.width = width + '%'; 
            elem3.innerHTML = width * 1 + '%';
        }
    }
}
function move41() {
    var width = 0;
    var id = setInterval(frame, 4);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem41.style.width = width + '%'; 
            elem41.innerHTML = width * 1 + '%';
        }
    }
}
move();move2();move3();move41();
function moveAll(){  
    move();move2();move3();move41();

    document.getElementById("WebDownNone").style.display = "block";
    document.getElementById("DownMusikNone").style.display = "none";
    document.getElementById("DownBookNone").style.display = "none";
    document.getElementById("DownUpdateNone").style.display = "none";
    document.getElementById("DownFotoNone").style.display = "none";
}
document.getElementById("oneMove").addEventListener("click", moveAll);

function move101() {

    document.getElementById("WebDownNone").style.display = "none";
    document.getElementById("DownMusikNone").style.display = "none";
    document.getElementById("DownBookNone").style.display = "block";
    document.getElementById("DownUpdateNone").style.display = "none";
    document.getElementById("DownFotoNone").style.display = "none"; 


    var width = 0;
    var id = setInterval(frame, 5);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem4.style.width = width + '%'; 
            elem4.innerHTML = width * 1 + '%';
        }
    }
}
function move102() {
    var width = 0;
    var id = setInterval(frame, 10);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem5.style.width = width + '%'; 
            elem5.innerHTML = width * 1 + '%';
        }
    }
}
function move103() {
    var width = 0;
    var id = setInterval(frame, 27);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem6.style.width = width + '%'; 
            elem6.innerHTML = width * 1 + '%';
        }
    }
}
function move42() {
    var width = 0;
    var id = setInterval(frame, 16);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem42.style.width = width + '%'; 
            elem42.innerHTML = width * 1 + '%';
        }
    }
}

function moveAll100(){  
    move101();move102();move103();move42();
}
document.getElementById("twoMove").addEventListener("click", moveAll100);



function move201() {

    document.getElementById("WebDownNone").style.display = "none";
    document.getElementById("DownMusikNone").style.display = "block";
    document.getElementById("DownBookNone").style.display = "none";
    document.getElementById("DownUpdateNone").style.display = "none";
    document.getElementById("DownFotoNone").style.display = "none"; 

    var width = 0;
     elem.style.width = width + '%';
    var id = setInterval(frame, 40);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            elem.style.width = 0;
            width++; 
            elem7.style.width = width + '%'; 
            elem7.innerHTML = width * 1 + '%';
        }
    }
}
function move202() {
    var width = 0;
    var id = setInterval(frame, 80);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem8.style.width = width + '%'; 
            elem8.innerHTML = width * 1 + '%';
        }
    }
}
function move203() {
    var width = 0;
    var id = setInterval(frame, 270);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem9.style.width = width + '%'; 
            elem9.innerHTML = width * 1 + '%';
        }
    }
}
function move43() {
    var width = 0;
    var id = setInterval(frame, 160);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem43.style.width = width + '%'; 
            elem43.innerHTML = width * 1 + '%';
        }
    }
}


setTimeout(()=>{
moveAll100();
},1000)
function moveAll200(){ 

    move201();move202();move203();move43();
}

document.getElementById("threeMove").addEventListener("click", moveAll200);




function move301() {

    document.getElementById("WebDownNone").style.display = "none";
    document.getElementById("DownMusikNone").style.display = "none";
    document.getElementById("DownBookNone").style.display = "none";
    document.getElementById("DownUpdateNone").style.display = "block";
    document.getElementById("DownFotoNone").style.display = "none";  

    var width = 0;
     elem.style.width = width + '%';
    var id = setInterval(frame, 100);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            elem.style.width = 0;
            width++; 
            elem10.style.width = width + '%'; 
            elem10.innerHTML = width * 1 + '%';
        }
    }
}
function move302() {
    var width = 0;
    var id = setInterval(frame, 200);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem11.style.width = width + '%'; 
            elem11.innerHTML = width * 1 + '%';
        }
    }
}
function move303() {
    var width = 0;
    var id = setInterval(frame, 670);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem12.style.width = width + '%'; 
            elem12.innerHTML = width * 1 + '%';
        }
    }
}
function move44() {
    var width = 0;
    var id = setInterval(frame, 400);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem44.style.width = width + '%'; 
            elem44.innerHTML = width * 1 + '%';
        }
    }
}
function moveAll300(){  

    move301();move302();move303();move44();
}

document.getElementById("fourMove").addEventListener("click", moveAll300);



function move401() {

    document.getElementById("WebDownNone").style.display = "none";
    document.getElementById("DownMusikNone").style.display = "none";
    document.getElementById("DownBookNone").style.display = "none";
    document.getElementById("DownUpdateNone").style.display = "none";
    document.getElementById("DownFotoNone").style.display = "block";

    var width = 0;
     elem.style.width = width + '%';
    var id = setInterval(frame, 10);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            elem.style.width = 0;
            width++; 
            elem13.style.width = width + '%'; 
            elem13.innerHTML = width * 1 + '%';
        }
    }
}
function move402() {
    var width = 0;
    var id = setInterval(frame, 20);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem14.style.width = width + '%'; 
            elem14.innerHTML = width * 1 + '%';
        }
    }
}
function move403() {
    var width = 0;
    var id = setInterval(frame, 80);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem15.style.width = width + '%'; 
            elem15.innerHTML = width * 1 + '%';
        }
    }
}
function move45() {
    var width = 0;
    var id = setInterval(frame, 80);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem45.style.width = width + '%'; 
            elem45.innerHTML = width * 1 + '%';
        }
    }
}
function moveAll400(){

    move401();move402();move403();move45();
}

document.getElementById("fiveMove").addEventListener("click", moveAll400);

</script>

Answer 1

由于您一次只有一个间隔，您可以在开始新间隔之前清除该间隔，您可以创建全局变量以开始并在第二个间隔开始时清除。

为了解释我所做的是，

将id移出函数

var id = null; //this will be a global variable now

然后，在每个函数中将 setinterval 分配给 id 变量，

id = setInterval(frame, 1000);//assigning 

然后，在所有函数中开始这个间隔之前清除间隔。

clearInterval(id);

请记住您需要在应用 setinterval 的所有函数中执行的第 2 步和第 3 步。简而言之，您只是在停止 setinterval。

您需要将 id 移出函数，将 id 应用于您要执行的每个函数中的 setinterval，以及 clearInterval(id)；在开始之前

var elem4 = document.getElementById("myBar4");
var elem5 = document.getElementById("myBar5");
var elem3 = document.getElementById("myBar3");
var elem2 = document.getElementById("myBar2");
var elem6 = document.getElementById("myBar6");
var elem7 = document.getElementById("myBar7");

var id = null;

function move() {
  var width = 0;
  clearInterval(id);
  id = setInterval(frame, 1000);

  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      elem4.style.width = width + '%';
      elem4.innerHTML = width * 1 + '%';
    }
  }
}

function move2() {
clearInterval(id);
  var width = 0;
  id = setInterval(frame, 1000);

  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      elem5.style.width = width + '%';
      elem5.innerHTML = width * 1 + '%';
    }
  }
}

move();
setTimeout(()=>{
move2();
},1000)



function moveAll() {
  move();
  move2();
  document.getElementById("MainDivOne").style.display = "block";
  document.getElementById("MainDivTwo").style.display = "none";
  document.getElementById("MainDivThree").style.display = "none";
}

<style>
  .mybar {
    width: 0%;
  }
</style>

<div id="MainDivOne">
  <!-- DIV 1 -->
  <div id="myProgress4">
    <div id="myBar4" class="myBar greenBar">0%</div>
  </div>
  <div id="myProgress5">
    <div id="myBar5" class="myBar yellowBar">0%</div>
  </div>
</div>

<div id="MainDivTwo">
  <!-- DIV 2 -->
  <div id="myProgress3">
    <div id="myBar3" class="myBar greenBar">0%</div>
  </div>
  <div id="myProgress2">
    <div id="myBar2" class="myBar yellowBar">0%</div>
  </div>
</div>

<div id="MainDivThree">
  <!-- DIV 3 -->
  <div id="myProgress6">
    <div id="myBar6" class="myBar greenBar">0%</div>
  </div>
  <div id="myProgress7">
    <div id="myBar7" class="myBar yellowBar">0%</div>
  </div>
</div>