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

作者：木道寻08 | 2024-06-30 04:05:59

踩

animejs 点击按钮动画加快

摘要：封装了一个动画函数，里面是添加定时器让元素实现移动的动画，当点击按钮 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(&#

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】