javascript - mouseenter与mouseleave的多次执行加锁问题，以及定时器的异步执行问题。-PHP中文网问答

1.代码最终想实现的效果是，mouseenter蓝色外圈围绕灰色内圆旋转一圈，mouseleave蓝色外圈围绕灰色内圆退回一圈。

2.css全部代码

 #fancyClock{margin:40px auto;}
.clock{background-color:#fff;height:200px;width:200px;position:relative;overflow:hidden;
    float:left;}
.clock .rotate{position:absolute;width:200px;height:200px;top:0;left:0;}
.rotate.right{display: none;transition: all 0.05s;z-index: 11;}
.clock .bg,
.clock .front{width:100px;height:200px;background-color:#fff;position:absolute;
    top:0;}
.clock .display{position:absolute;width:164px;height: 164px;border-radius: 50%;
    z-index:20;color:#fff;background-color: #e7e2dd;font-size:60px;
    text-align:center;top:18px;left:18px;}
.rotatex{transition: all 0.05s;z-index: 9;}

/* 左半边部分*/
.clock .bg.left{left:0;}
.green .bg.left{background:url(images/rotate.png) no-repeat left top;}
/* 右边部分*/
.clock .bg.right{left:100px;}
.green .bg.right{background:url(images/rotate.png) no-repeat right top;}
.clock .front.left{left:0;z-index:10;//遮罩层}

3.html代码部分

<p id="fancyClock">
    <p class="green clock">
        <p class="display" id="seconds">00</p>    <!-- 最表面展现的那层 -->
        <p class="front left" id="zhezao"></p>    <!-- 用于遮盖左半部分超出的 -->
        <p class="rotate rotatex left" id="RotateLeft">  <!-- 左半部分的旋转 -->
            <p class="bg left"></p>
        </p>
        <p class="rotate rotatey right" id="RotateRight"><!-- 右半部分的旋转，不旋转则为隐藏-->
            <p class="bg right"></p>
        </p>
    </p>
</p>

4.jquery代码部分

var change = true;
    
    $("#seconds").mouseenter(function(){
        if(change){
            change = false;

            var degree = 20;     //默认每次旋转20°
            var timer1 = setInterval(function(){
                change = false;
                
                $(".rotatex").css({
                    WebkitTransform: 'rotate(' + degree + 'deg)'      //隔50毫秒顺时针旋转20°
                })
                degree += 20;
                if (degree > 180) {                 
                    clearInterval(timer1);      //当>180° 的时候左半部分清除动画，不执行,并开始执行右半部分
                    timer1 = null;
                    degree = 20;
                    var timer2 = setInterval(function(){

                        $("#RotateRight").show();          //右半部分先显示
                        $(".rotatey").css({
                            WebkitTransform: 'rotate(' + degree + 'deg)'    //隔50毫秒旋转20°
                        })
                        degree+= 20;
                        if (degree > 180) {       //当>180° 的时候右半部分清除动画，不执行
                            degree = 180;
                            clearInterval(timer2);
                            timer2 = null;
                        }else{return;}
                    },50);
                }else{return;}
            },50);
        }
        change = true;
    });

    $("#seconds").mouseleave(function(){
        console.log(change);
        if(change){
            change = false;
            var degree = 180;
            
            var timer2 = setInterval(function(){
                change = false;
                degree -= 20;
                console.log(degree);
                
                $(".rotatey").css({
                    WebkitTransform: 'rotate('+ degree+'deg)'       //逆时针旋转20°，直到0°
                })
                if(degree <= 0){
                    clearInterval(timer2);
                    $("#RotateRight").hide();       //右半部分清除定时器，不执行并隐藏

                    degree = 180;
                    var timer1 = setInterval(function(){
                        change = false;
                        
                        degree -= 20;    
                        $(".rotatex").css({
                            WebkitTransform: 'rotate('+ degree+'deg)'    //逆时针旋转20° 直到0°
                        })
                        if(degree <= 0){
                            clearInterval(timer1);           //左半部分清除定时器，不执行
                        }else{return;}    
                    },50);
                }else{return;}
            },50);
        }
        change = true;
    });

 5.遇到的问题
    
    关键点 全局变量 change的true和false；
    mouseenter执行之后，移开mouseleave，多次实验结果发现，
    大多时候change为false，有时为true，不明所以；