Question

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

我也有3个按钮。在每个运行的特定功能上，这2个div隐藏了3个。

这就是问题所在，当我单击按钮时，单个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

由于每次只能有一个间隔，因此可以在启动较新的间隔之前清除间隔，因此可以创建全局变量startwith并在第二个开始时清除。

为了解释我的所作所为，

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

Answer 2

首先，您需要将var id移出函数，所以这是一个全局作用域var，在整个脚本中都是必需的。在第二位，只需要向按钮EventListener添加一些代码即可。代码如下：

var id = null;
var elem = document.getElementById("myBar"); 
var elem2 = document.getElementById("myBar2");

function move() {
		var width = 0;
		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;
		id = setInterval(frame, 2);
		function frame() {
				if (width >= 100) {
						clearInterval(id);
				} else {
						width++; 
						elem2.style.width = width + '%'; 
						elem2.innerHTML = width * 1 + '%';
				}
		}
}
document.getElementById("oneMove").addEventListener("click", function(){
	if(id)
		clearInterval(id);
	move();
});
document.getElementById("twoMove").addEventListener("click", function(){
	if(id)
		clearInterval(id);
	move2();
});

div {
	border: 1px solid red;
	height: 20px;
	width: 0;
}

<div id="myBar"></div>
<button id="oneMove">oneMove</button>
<div id="myBar2"></div>
<button id="twoMove">TwoMove</button>

请注意，在此范围内，单击按钮将停止任何先前运行的功能，如果单击两次可能会产生难看的效果。您可以根据需要自定义代码。

Answer 3

一种解决方案是返回move函数的id，以便在启动另一个函数时可以使用clearInterval（）。

返回move1（）中的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;
}

向move2（）添加参数

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 + '%';
    }
  } 
}

然后调用函数（我添加了超时以查看区别）。基本上，我只是以move1的id作为参数调用move2。

 var move1Id = move();

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

要稍微推动一下，我建议在move2（）中将id参数设置为可选。

Java函数即使在c之后也保持执行

3 个答案: