定时器清除不掉

来源:-

qq_总有刁民想害朕_25

2017-03-14 20:49

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        #div1 span{

            width:20px;

            height:50px;

            background-color:blue;

            position: absolute;

            top:75px;

            left:200px;

        }

        #div1{

            width:200px;

            height:200px;

            background-color:red;

            position: relative;

            top:0;

            left:-200px;

        }

    </style>

</head>

<body>

<div id="div1"><span id="share">分享</span></div>

</body>

<script>

    var oDiv = document.getElementById('div1');

    oDiv.onmouseover = function(){

        startMove(10,0);

    }

    oDiv.onmouseout = function(){

        startMove(-10,-200);

    }

    var timer = null;

    function startMove(speed,value){

        clearInterval(timer);

        var oDiv = document.getElementById('div1');

        timer = setInterval(function(){

            if(oDiv.offsetLeft == 0){

                clearInterval(timer);

            }else{

                oDiv.style.left = oDiv.offsetLeft+speed+'px';

            }

        },30)

    }

</script>

</html>


写回答 关注

2回答

  • qq_总有刁民想害朕_25
    2017-03-16 23:25:59

    执行函数时先清除定时器在执行定时器  避免函数重复执行

  • 自由的气息
    2017-03-16 15:38:36

    函数刚开始执行时为什么要清除定时器,指的是第一个

      function startMove(speed,value){

            clearInterval(timer);//这个


JS动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113925 学习 · 1443 问题

查看课程

相似问题