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 使用esm_msa1_t12_100M_UR50S蛋白质语言模型进行零样本预测时，终端显示出了sequence handled的进度条，但是并不出结果就自动终止回到命令提示行了是怎么回事：
  • ¥15 前置放大电路与功率放大电路相连放大倍数出现问题
  • ¥30 关于<main>标签页面跳转的问题
  • ¥80 部署运行web自动化项目
  • ¥15 腾讯云如何建立同一个项目中物模型之间的联系
  • ¥30 VMware 云桌面水印如何添加
  • ¥15 用ns3仿真出5G核心网网元
  • ¥15 matlab答疑 关于海上风电的爬坡事件检测
  • ¥88 python部署量化回测异常问题
  • ¥15 在现有系统基础上增加功能