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

摘要：封装了一个动画函数，里面是添加定时器让元素实现移动的动画，当点击按钮 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('span');
var btn = document.querySelector('button');
        // 调用函数
        animate(span, 300);
        btn.addEventListener('click', function () {   
            animate(span, 200);
        })
</script>
</body>

结果：

因此，在定时器函数前先清除以前的定时器，只保留当前的要运行的一个定时器，

代码如下：

<body>
    <button>点击夏雨荷才走</button>
    <span>夏雨荷</span>
<script>
function animate(obj, target) {
            // 当我们不断点击按钮，这个元素速度会越来越快，因为开启了太多的定时器
             clearInterval(obj.timer);// 先清除以前的定时器，只保留当前的一个定时器执行
            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('span');
var btn = document.querySelector('button');
        // 调用函数
        animate(span, 300);
        btn.addEventListener('click', function () {   
            animate(span, 200);
        })
</script>
</body>

效果：

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

猜你喜欢