运动案例基础案例模拟

　　增加功能：

　　【1】left值达到300px时停止运动。

<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
html{font-family:楷体;}
#div1{width:200px;height:200px;background:red;position:absolute;}
</style>
<script>
window.onload=function()
{
    var oBtn=document.getElementById('btn1');
    var oDiv=document.getElementById('div1');
    oBtn.onclick=function()
    {
        setInterval(
        function()
        {   
            oDiv.style.left=oDiv.offsetLeft+10+'px';
        }
        ,100)
        
    }
};

</script>

</head>

<body>
<input id='btn1' type='button' value='开始运动'>
<div id='div1'></div>
</body>
</html>

　　

设置定时器关闭的条件
    var timer=null;
    oBtn.onclick=function()
    {
        timer=setInterval(
        function()
        {
            if(oDiv.offsetLeft>=300)
            {
                clearInterval(timer);
            }
                       else
                       {
                    oDiv.style.left=oDiv.offsetLeft+10+'px';
                        }
        }
        ,100)
        
    }

 

在执行定时器前，添加清除定时器，保证每次点击只打开一个定时器。重点是每次点击只打开一个定时器前清除上次点击的定时器，这样可以保证每次只有一个定时器工作，滑块运动避免越点越快。

window.onload=function()
{
    var oBtn=document.getElementById('btn1');
    var oDiv=document.getElementById('div1');
    var timer=null;
    oBtn.onclick=function()
    {
        clearInterval(timer);
        timer=setInterval(
        function()
        {
            if(oDiv.offsetLeft>=300)
            {
                clearInterval(timer);
            }
            else
            {
                oDiv.style.left=oDiv.offsetLeft+10+'px';
            }
        }
        ,100)
        
    }
};

　　问题：offsetLeft与left的区别有哪些?

　　存在问题的代码：

var timer=null;
    oBtn.onclick=function()
    {
        timer=setInterval(
        function()
        {
            if(oDiv.offsetLeft>=300)
            {
                clearInterval(timer);
            }
                        
            oDiv.style.left=oDiv.offsetLeft+10+'px';
        }
        ,100)    
    }

　　常见问题：

　　【1】在触发定时器关闭的条件后，再次点击按钮，滑块仍然会移动一次。

　　原因：点击按钮，会触发setInterval()执行，虽然offsetLeft值已经超过300触发关闭定时器的条件，但是下面的oDiv.style.left=oDiv.offsetLeft+10+'px';也会执行一次，造成点击一次移动一点。而采用if/else将停止与运动分开，就可以避免这种情况。

　　【2】在滑到停止点前多次点击按钮，滑块会越来越越快，并且抵达限制定时器关闭点后不会停止，而是继续向右滑动，为什么?即便打开多个定时器，根据setInterval()内的if条件也不应该停不下来啊?这点尚不清楚原因。

　　猜测：定时器的关闭只关闭了一个。

　　而下面的代码尽管在条件点前也存在越点越快问题，但是会在条件点停止运动。

    var timer=null;
    oBtn.onclick=function()
    {
        timer=setInterval(
        function()
        {
            if(oDiv.offsetLeft>=300)
            {
                clearInterval(timer);
            }
           else
            {
               oDiv.style.left=oDiv.offsetLeft+10+'px';
            }
        }
        ,100)    
    }

 

posted @ 2018-07-20 16:43  请叫我二狗哥  阅读(254)  评论(0)    收藏  举报