【Web前端问题】JS动画定时器问题导致动画有点小问题

图片描述

大神们帮我看看这个动画哪里有问题，点注册的时候小条正常滑到注册那，点登录的时候就不正常了，我觉得是定时器问题

这是这部分代码
load_but.onclick = function(){ //点击登陆按钮

var timebar = null;    
timebar = setTimeout(bar_move(0),100);    //滑动小条在点击之后延时100毫秒执行

}
sign_but.onclick = function(){ //点击注册按钮

var timebar = null;    
timebar = setTimeout(bar_move(185),100)    //滑动小条在点击之后延时100毫秒执行

}

var timemovebar = null; //滑动小条动画方法

        function bar_move(target){
            clearInterval(timemovebar);
            timemoverbar = setInterval(function(){
                if(move_bar.offsetLeft==target){
                    clearInterval(timemovebar);
               }else{
                    var speed = (target - move_bar.offsetLeft)/10;
                    speed = speed<0?Math.floor(speed):Math.ceil(speed);
                    move_bar.style['left']=move_bar.offsetLeft+speed+'px';
                }
            },10)
        }

回答：

原因在于你把bar_move函数中的setInterval()赋值给的是timemoverbar，而其它地方用的都是timemovebar，move多了一个r。。导致bar_move函数中的clearInterval()不能把定时器清除掉。
滑块向右移能停下来是因为这是一个减速运动，speed会越来越小最后变为1。然后move_bar的left就不停地加1直到等于185。最后就会执行上面的clearInterval()方法，但由于你写错了，导致其实setInterval()一直都没被清除掉。当你再点击登录时，就又添加了一个定时器，执行的却是同一个函数，就出问题了。你在定时器中打印speed就可以看清楚了。

回答：

setTimeout第一个参数要么是字符串，要么是函数
你应该这样写

timebar = setTimeout(function(){ bar_move(0)},100)
timebar = setTimeout(function(){ bar_move(185)},100)

而且我感觉你那个 bar_move 函数里面的定时器永远都不会停？

以上是 【Web前端问题】JS动画定时器问题导致动画有点小问题 的全部内容， 来源链接： utcz.com/a/142175.html

回到顶部