为了账号安全,请及时绑定邮箱和手机立即绑定

关于js物体运动是否应该在一开始就清除掉计时器的问题

关于js物体运动是否应该在一开始就清除掉计时器的问题

慕雪5039924 2018-01-16 20:33:11
function antimate(obj,json){   //clearInterval(obj.timer)    obj.timer = setInterval(function(){        var flag = true;        for(var attr in json){            var current = parseInt(getStyle(obj,attr));            var ste = (json[attr] - current)/10;             var step = ste>0?Math.ceil(ste):Math.floor(ste);            obj.style[attr] = current + step +"px";            if(current!=json[attr]){             flag = false;            }        }            if(flag)            {                clearInterval(obj.timer);                console.log("定时器清除")            }             },30) };function getStyle(obj,attr){    if(window.getComputedStyle(obj,null)){        return window.getComputedStyle(obj,null)[attr]    }    else {        return obj.currentStyle[attr]    }}var div = document.getElementsByTagName("div")[0];var lis = div.children[0].children;    for(var i=0;i<lis.length;i++)    {        lis[i].style.backgroundImage ="url(images/"+(i+1)+".jpg)";        lis[i].onmouseover = function()        {               for(var i=0;i<lis.length;i++)            {            antimate(lis[i],{width:100})            }            antimate(this,{width:800})                    } 如果我注释掉一开始的清除计时器,那么在下面调用时,如果我只把鼠标放在第一个li上,控制台会输出第2,3,4,5个li的计时器结束,此时第一个li的计时器还在运行,但是width会卡在400左右哆嗦,据我的理解,此时应该只有一个计时器在运行,应该不存在计时器干扰,而且在计时器后面使用了if语句条件判断是否应该结束计时器,但是为什么在一开始还是要清除计时器,而且会出现这种bug,对此不解 
查看完整描述

2 回答

?
kevinZee

TA贡献50条经验 获得超39个赞

定时器返回的是个数字,你在给对象的timer赋值的时候,如果不清除掉前一个timer,那这个timer就永远清除不掉了

查看完整回答
1 反对 回复 2018-01-16
  • 慕雪5039924
    慕雪5039924
    不是很理解,能再说的详细一点吗
  • kevinZee
    kevinZee
    你每次调用这个animate函数,都会对obj.timer赋一次值,这个值就是setInterval函数的返回值,是一个数字,可以理解为这个定时器的序列号,是唯一的,如果你对同一个对象调用这个animate,并且上一个动画的没有完成,那么timer就被改变了,就算上一个动画完成了,清除掉的是新的的timer,所以这个函数不能对同一个对象开多个定时器,必须在开头清除一下
?
慕运维7130634

TA贡献41条经验 获得超18个赞

你的timer都没有定义好不好?

查看完整回答
反对 回复 2018-01-16
  • 2 回答
  • 2 关注
  • 1378 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信