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);}相冲突，导致收起无效。大家有什么好的方案，求指导-。-。

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) {
        clearInterval(timer);
        timer = setInterval(function() {
            speed = ar1 * (yh - y1.offsetHeight) / 5;
            console.log(speed);
            speed = speed ? Math.ceil(speed) : Math.floor(speed);
            console.log(speed);
            speed == -0 ? speed = -(y1.offsetHeight) : ''; //当speed减少为-0的时候，直接变成div高度使div减少为0。否则无法取消定时器。
            if (y1.offsetHeight === yh) {
                clearInterval(timer);
            } else {
                y1.style.height = y1.offsetHeight + speed + "px";
            }
        }, 20)
    }

    x.onclick = function() {
        if (y.offsetHeight < 5) {
            s(1, y, 500);
        } else {
            s(1, y, 0) 
        }
    }
}

那就不要直接判断相等

y1.offsetHeight>yh

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

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){
              clearInterval(timer);
              timer = setInterval(function(){
                speed = ar1*(yh-y1.offsetHeight)/5;（这里做下处理，当速度小于某值的时候等于某值）
                speed = speed?Math.ceil(speed):Math.floor(speed);
                if (y1.offsetHeight===yh){
                  console.log(y1.offsetHeight)
                  clearInterval(timer);
                }else{
                  y1.style.height = y1.offsetHeight + speed + "px";
                }
              },20)
            }
            
            x.onclick = function(){
                if(y.offsetHeight < 5){  
                  s(1,y,400);
                }else{
                  s(1,y,0)   //改个传参就行了
                }
              }
            }

【热门文章】