Javascript函数即使在c

我正在构建一个代码，其中我有3个div，每个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>

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”）；
函数move（）{
var宽度=0；
变量id=设置间隔（帧，0）；
函数框架（）{
如果（宽度>=100）{
清除间隔（id）；
}否则{
宽度++；
elem.style.width=宽度+'%'；
elem.innerHTML=宽度*1+'%'；
}
}
}
函数move2（）{
var宽度=0；
var id=设置间隔（第2帧）；
函数框架（）{
如果（宽度>=100）{
清除间隔（id）；
}否则{
宽度++；
elem2.style.width=宽度+'%'；
elem2.innerHTML=宽度*1+'%'；
}
}
}
函数move3（）{
var宽度=0；
var id=设置间隔（第6帧）；
函数框架（）{
如果（宽度>=100）{
清除间隔（id）；
}否则{
宽度++；
elem3.style.width=宽度+'%'；
elem3.innerHTML=宽度*1+'%'；
}
}
}
函数41（）{
var宽度=0；
var id=设置间隔（第4帧）；
函数框架（）{
如果（宽度>=100）{
清除间隔（id）；
}否则{
宽度++；
elem41.style.width=宽度+'%'；
elem41.innerHTML=宽度*1+'%'；
}
}
}
move（）；move2（）；move3（）；move41（）；
函数moveAll（）{
move（）；move2（）；move3（）；move41（）；
document.getElementById（“WebDownNone”）.style.display=“block”；
document.getElementById（“downmusikone”）.style.display=“无”；
document.getElementById（“DownBookNone”）.style.display=“none”；
document.getElementById（“DownUpdateOne”）.style.display=“无”；
document.getElementById（“downfotone”）.style.display=“无”；
}
document.getElementById（“oneMove”）.addEventListener（“单击”，移动全部）；
函数move101（）{
document.getElementById（“WebDownNone”）.style.display=“无”；
document.getElementById（“downmusikone”）.style.display=“无”；
document.getElementById（“DownBookNone”）.style.display=“block”；
document.getElementById（“DownUpdateOne”）.style.display=“无”；
document.getElementById（“downfotone”）.style.display=“无”；
var宽度=0；
变量id=设置间隔（第5帧）；
函数框架（）{
如果（宽度>=100）{
清除间隔（id）；
}否则{
宽度++；
elem4.style.width=宽度+'%'；
elem4.innerHTML=宽度*1+'%'；
}
}
}
函数move102（）{
var宽度=0；
var id=设置间隔（第10帧）；
函数框架（）{
如果（宽度>=100）{
清除间隔（id）；
}否则{
宽度++；
elem5.style.width=width+'%'；
elem5.innerHTML=宽度*1+'%'；
}
}
}
函数103（）{
var宽度=0；
变量id=设置间隔（第27帧）；
函数框架（）{
如果（宽度>=100）{
清除间隔（id）；
}否则{
宽度++；
elem6.style.width=width+'%'；
elem6.innerHTML=宽度*1+'%'；
}
}
}
函数move42（）{
var宽度=0；
var id=设置间隔（第16帧）；
函数框架（）{
如果（宽度>=100）{
清除间隔（id）；
}否则{
宽度++；
elem42.style.width=width+'%'；
elem42.innerHTML=宽度*1+'%'；
}
}
}
函数moveAll100（）{
move101（）；move102（）；move103（）；move42（）；
}
document.getElementById（“twoMove”）.addEventListener（“单击”，moveAll100）；
函数move201（）{
document.getElementById（“WebDownNone”）.style.display=“无”；
document.getElementById（“downmusikone”）.style.display=“block”；
document.getElementById（“DownBookNone”）.style.display=“none”；
document.getElementById（“DownUpdateOne”）.style.display=“无”；
document.getElementById（“downfotone”）.style.display=“无”；
var宽度=0；
elem.style.width=宽度+'%'；
var id=设置间隔（第40帧）；
函数框架（）{
如果（宽度>=100）{
清除间隔（id）；
}否则{
elem.style.width=0；
宽度++；
elem7.style.width=宽度+'%'；
elem7.innerHTML=宽度*1+'%'；
}
}
}
函数move202（）{
var宽度=0；
变量id=设置间隔（帧，80）；
函数框架（）{
如果（宽度>=100）{
清除间隔（id）；
}埃尔斯
var id = null; //this will be a global variable now

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

clearInterval(id);

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

function move2(stopId) {
  // stops the previous move function
  clearInterval(stopId);

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

 var move1Id = move();

 setTimeout(function() {
   move2(move1Id);
 }, 600)