weixin_52800780 2021-05-16 14:25 采纳率: 75%
浏览 33
已采纳

关于JavaScript计时器动画问题

各位大佬,请问JavaScript做前端动画的时候,如果设置成这样子,动画函数中的if语句不是>=而是==,结果会是盒子只在所定义的距离参数target=200时才会停下,不然会一直动下去,这是为什么呢?求解答

<body>
    <div>this is a cartoon</div>
    <p>flash</p>
    <button>点击</button>
    <script>
        function aminate(obj, target) {
            clearInterval(obj.time);
            obj.time = setInterval(function () {
                if (obj.offsetLeft == target) {
                    clearInterval(obj.time);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';
            }, 30)
        }
        var div = document.querySelector('div');
        var span = document.querySelector('p');
        var btn = document.querySelector('button');
        aminate(div, 300);
        btn.addEventListener('click', function () {
            aminate(span, 300);
        });
    </script>
</body>

第二个小问题,这是一个点击+盒子移动动画的程序,第一次点击移动到指定位置,到之后点击还可以移动一小段距离,请问这是为什么呢?

<body>
    <div>this is a cartoon</div>
    <p>flash</p>
    <button>点击</button>
    <script>
        function aminate(obj, target) {
            clearInterval(obj.time);
            obj.time = setInterval(function () {
                if (obj.offsetLeft >= target) {
                    clearInterval(obj.time);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';
            }, 30)
        }
        var div = document.querySelector('div');
        var span = document.querySelector('p');
        var btn = document.querySelector('button');
        aminate(div, 300);
        btn.addEventListener('click', function () {
            aminate(span, 300);
        });
    </script>
</body>
  • 写回答

2条回答 默认 最新

  • iMingzhen 2021-05-16 15:49
    关注

    1.

    你是每次重新读取offsetLeft也就是相对距离来进行递增,读取到的值并不是每次都+1的,你可以通过打印出每次setInterval拿到的offsetLeft发现这个问题。可以通过第一次读取,之后维护使用这个值来解决,如下

            function aminate(obj, target) {
                clearInterval(obj.time);
    			let left = obj.offsetLeft;
                obj.time = setInterval(function () {
    				left++;
                    if (left == target) {
                        clearInterval(obj.time);
                    }
                    obj.style.left = left  + 'px';
    				
    				console.log(obj.style.left)
                }, 30)
            }

    2.

    你每次点击按钮时都会触发animate,同时也会创建一个setInterval,即使你进去就清除了它,他也会执行一次,如果要避免,在if条件内加个return让后续不再执行,或者加个else

             function aminate(obj, target) {
                clearInterval(obj.time);
    			let left = obj.offsetLeft;
                obj.time = setInterval(function () {
    				left++;
                    if (obj.offsetLeft >= target) {
                        clearInterval(obj.time);
    					return;
                    }
                    obj.style.left = obj.offsetLeft+1  + 'px';
    				
    				console.log(obj.style.left)
                }, 30)
            }

    如有帮助 请采纳 谢谢

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题