JS动画定时器问题导致动画有点小问题 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JS动画定时器问题导致动画有点小问题

2016-06-13 17:18:06 2245 1

screenshot

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

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

取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:36:32

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

    0 0
相关问答

1

回答

定时触发器 有没有运行时间超时的参数?

2022-09-08 16:01:45 53浏览量 回答数 1

1

回答

【OSS】通过浏览器访问Bucket或Object时提示“TypeError: Failed to

2022-01-18 17:34:59 385浏览量 回答数 1

1

回答

zookeeper 的 leader 服务器再运行期间定时进行会话超时检查的时间间隔,单位是什么呢?

2021-12-07 16:14:15 102浏览量 回答数 1

1

回答

postgresql最好的后台服务器是postgrest还是nodejs

2019-11-28 13:42:06 334浏览量 回答数 1

1

回答

Mybatis通过拦截器做行权限控制 有什么开源解决方案?

2019-05-11 10:49:44 3223浏览量 回答数 1

0

回答

服务器升级后,无法访了,宝塔后台进不去了

2019-01-29 07:54:27 251浏览量 回答数 0

2

回答

ECS设置了自定义安全组端口 但是无法telnet 也访问不了

2018-09-06 18:28:17 1586浏览量 回答数 2

2

回答

为什么ECS服务器升级了20M的固定带宽速度那么慢

2017-10-10 22:39:50 2285浏览量 回答数 2

1

回答

如何实现可中断的定时器

2016-06-27 15:26:54 1521浏览量 回答数 1

1

回答

关于typedef 在iOS中的使用,特别是和block一起使用的用法。

2016-03-13 11:01:14 1930浏览量 回答数 1
+关注
杨冬芳
IT从业
1
文章
9167
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载