解决动画函数点击按钮后可能出现的Bug---动画越来越快的问题（方案）

上官海岚

已于 2022-09-22 22:14:55 修改

阅读量332

点赞数

分类专栏： JavaScript 学习笔记和案例文章标签： bug 动画 javascript 前端

于 2022-09-16 20:46:27 首次发布

本文链接：https://blog.csdn.net/weixin_44566194/article/details/126881886

版权

本文介绍了一种前端JavaScript动画中常见的问题，即点击按钮后元素移动速度越来越快。原因在于未清除旧的定时器，导致动画叠加。解决方案是在每次点击按钮启动动画前，先清除已存在的定时器，确保只有一个定时器在运行，从而避免元素移动速度异常加快。

摘要由CSDN通过智能技术生成

摘要：封装了一个动画函数，里面是添加定时器让元素实现移动的动画，当点击按钮 button 触发事件后，元素开始移动，再点击按钮，元素移动加快，不断点击按钮发现元素移动速度会越来越快，解决这个Bug 问题的方法是先清除定时器，只保留当前的一个定时器，这样就不会出现不断点击按钮使元素不断变快移动了。

未清除定时器时的代码：

<body>
    <button>点击夏雨荷才走</button>
    <span>夏雨荷</span>
<script>
function animate(obj, target) {
            // 当我们不断点击按钮，这个元素速度会越来越快，因为开启了太多的定时器
            obj.timer = setInterval(function () {
            if (obj.offsetLeft == target) {
            // 停止动画 本质是停止定时器
               clearInterval(obj.timer);
            obj.style.left = obj.offsetLeft + 1 + 'px';
            }, 30);
}
var div = document.querySelector('div');
var span = document.querySelector(&#