javascript - setInterval() ,JS实现toggle，逻辑冲突
本文介绍了javascript - setInterval() ,JS实现toggle，逻辑冲突的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>toggle</title>
<script type="text/javascript">
window.onload = function(){
var x,y,speed,ar1,y1,s,yh,timer;
x = document.getElementById('bt');
y = document.getElementById('co');
s = function(ar1,y1,yh){
timer = setInterval(function(){
speed = ar1*(yh-y1.offsetHeight)/5;
speed = speed?Math.ceil(speed):Math.floor(speed);
if (y1.offsetHeight===yh){
clearInterval(timer);
}else{
y1.style.height = y1.offsetHeight + speed + "px";
}
},20)
}
x.onclick = function(){
if(y.offsetHeight===0){
s(1,y,400);
}else{
s(-1,y,400)
}
}
}
</script>
</head>
<body>
<button type="button" id="bt">Event</button>
<div id="co" style="background-color:red;width:200px;height:0;">
</div>
</body>
</html>
setInterval()函数控制展开收起，从x.onclick传入s函数，判断y的高度展开或收起div。展开没有问题，在收起时（y.offsetHeight===400）{s(-1,y,400);}与方法函数里面的if (y1.offsetHeight===yh){clearInterval(timer);}相冲突，导致收起无效。大家有什么好的方案，求指导-。-。
解决方案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>toggle</title>
<script type="text/javascript">
window.onload = function(){
var x,y,speed,ar1,y1,s,yh,timer,animationRunning=false;
x = document.getElementById('bt');
y = document.getElementById('co');
s = function(ar1,y1,yh){
if(animationRunning){
return;
}
clearInterval(timer);
var target=((ar1===-1)?0:yh);
timer = setInterval(function(){
animationRunning=true;
if(y1.offsetHeight<5){
speed= Math.ceil((target-5)/5);
}else{
speed = Math.ceil((target-y1.offsetHeight)/5);
}
if(y1.offsetHeight===target){
animationRunning=false;
clearInterval(timer);
return;
}
y1.style.height = y1.offsetHeight + speed + "px";
},20)
};
x.onclick = function(){
if(y.offsetHeight===0){
s(1,y,400);
}else{
s(-1,y,400)
}
}
}
function test(e,number){
console.log(number);
}
</script>
</head>
<body>
<button type="button" id="bt">Event</button>
<div id="co" style="background-color:red;width:200px;height:0;">
</div>
<input name="sdf" onkeyup="return test(this,value);"/>
</body>
</html>
这篇关于javascript - setInterval() ,JS实现toggle，逻辑冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
