javascript - JS动画定时器问题导致动画有点小问题
PHPz
PHPz 2017-04-11 10:58:17
[JavaScript讨论组]

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

这是这部分代码
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)
        }
PHPz
PHPz

学习是最好的投资!

全部回复(2)
ringa_lee

原因在于你把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 函数里面的定时器永远都不会停?

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号