javascript - 如何在落下动画完成后才能点击向上的动画？代码如下-PHP中文网问答

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击下落</title>
    <style type="text/css">
    body{
        height: 600px;
    }
    li{
        margin: 20px;
        position: absolute;
        top: 20px;
        width: 50px;
        height: 50px;
        list-style: none;
        background: red;
    }


    </style>
    <script type="text/javascript">
    window.onload = function(){
/*获取元素属性值*/
function getStyle(ele,attr){
            return ele.currentStyle? ele.currentStyle[attr] :getComputedStyle(ele)[attr];
        }
/*改变属性元素移动*/
function doMove(ele,dir,attr,target,endFn){
            dir = parseInt(getStyle(ele,attr))<target ? dir : -dir;
            clearInterval(ele.timer);
            ele.timer = setInterval(function(){
            var speed = parseInt(getStyle(ele,attr))+dir;
                if (speed>=target&&dir>0||speed<=target&&dir<0) {    //向前跑
                    speed = target;
                };
            ele.style[attr] = speed+'px';
            if (speed==target) {
                clearInterval(ele.timer);
                endFn&&endFn();
                }
                
            },30)
        }
    for (var i = 0; i < 20; i++) {
                document.body.innerHTML += "<li style='left:"+i*60+"px'></li>"
            };
    var lists = document.getElementsByTagName('li'); 
    var onoff=false;
    var updown =true;
    var n;
    document.body.onclick =  UDFloat;
    function UDFloat(){
        if (onoff) {
            return
        };
        onoff = true;
        if (updown) {
            n = 0;
            updown = false;
        } else{
            n = 2;
            updown = true;
        }
        var arr = [50,400,50,50];
        var num = 0;
        timerT= null;
        clearInterval(this.animate);
        timerT = setInterval(function(){
            doMove(lists[num],arr[n],'top',arr[n+1]);
            num++;
            if(num==lists.length){
                clearInterval(timerT);
            }            
        },80)
        onoff = false;
    }    
}
    </script>
</head>
<body>
    
</body>
</html>