前端开发JS–匀速运动

准备工作
1、有一个用户可视的物体
2、点击一个按钮，触发运动

 <style>
        div{
            width:100px;
            height:100px;
            background-color:orange;
            position:absolute;
            left:0px;
            top:0px;
        }
        button{
            margin-top:150px;
        }
</style>

一、匀速运动

 //运动就是改变物体像素
 //有了一个div,js要控制，首先要获取,元素然后在进行控制。
 //点击btn，物体快发生运动。
        var oDiv=document.getElementsByTagName("div")[0];
        var oBtn=document.getElementById('btn');
        oBtn.onclick=function(){
            //s=v*t;
            var iSpeed=4;//以每30ms4px的速度匀速移动。
            setInterval(function(){
                oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';//offsetLeft为当前元素相对于父元素左侧偏移
            },30);
        }

以上代码实现了点击button按钮后像素块的匀速运动。但是存在问题，即多次点击后运动速度越来越快。原因是点击多次就会多次触发定时器，即一个周期内触发次数不止一次。（结合cst js执行机制看)
下面解决这个问题：
解决这个问题：每次点击后，先清除之前的定时器，然后重新开启一个setInterval()。实现如下：

	    var oDiv=document.getElementsByTagName("div")[0];
        var oBtn=document.getElementById('btn');
        //如何停止一个定时器呢？setInterval每次调用都会返回一个特殊标识，可以利用这一点进行清除。
        var timer=null;//设置一个时间戳，接收setInterval调用特殊返回值（时间）
        oBtn.onclick=function(){      //s=v*t;       
            var iSpeed=4;             //以没30ms4px的速度匀速移动				
            clearInterval(timer);     //每次调用前先清除上一次调用的timer;
            timer=setInterval(function(){
                oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';//offsetLeft为当前元素相对于父元素左侧偏移
            },30);
        }

        //可以看到完美解决了这个问题

那么我们已经初步掌握了运动的小魔法，可是一直动很累呀，怎么停止呢？

二、运动停止

		var oDiv=document.getElementsByTagName("div")[0];
        var oBtn=document.getElementById('btn');
        //如何停止一个定时器呢？setInterval每次调用都会返回一个特殊标识，可以利用这一点进行清除。
        var timer=null;//设置一个时间戳，接收setInterval调用特殊返回值（时间）
        oBtn.onclick=function(){
            startMove(oDiv,300);
        }


        //将匀速运动和停止模块封装成为一个函数startMove(),提高代码的复用度。
        function startMove(dom,target){
            var iSpeed=target-dom.offsetLeft>0?7:-7;//以没30ms4px的速度匀速移动。
            //每次调用前先清除上一次调用的timer;
            clearInterval(timer);
            timer=setInterval(function(){
                if(Math.abs(target-dom.offsetLeft)<Math.abs(iSpeed)){
                    clearInterval(timer);
                    dom.offserLeft=target+"px";
                }else{
                dom.style.left=dom.offsetLeft+iSpeed+'px';//offsetLeft为当前元素相对于父元素左侧偏移
                }
            },30);
        }

到此我们就实现了匀速运动的开始与停止功能！
…
第一篇博客，希望能够坚持下去，加油小伙伴们！
希望大家多多批评指正，谢谢。