JS给不同的对象添加不同的定时器 以及点击事件多次触发定时器的BUG解决

<script>
    //注意 函数需要传递2个参数, 动画对象  和  移动的距离;
    // obj 代表 目标对象?   targrt  是目标移动位置
    let div = document.querySelector('div');
    let span = document.querySelector('span');
    let btn1 = document.querySelector('.btn1');
    let btn2 = document.querySelector('.btn2');
    //可以利用对象  给不同的元素指定不同的定时器
    //调用的时候,传div  那么这个obj就等于div.timer  传span obj就等于span .timer
    function animate(obj, targrt) {
        //当我们不断的触发点击事件让函数运行的时候,元素会一直触发定时器 会越来越快
        //解决方案就是每次触发的时候  先定时器外面先清除定时器 就保证每次只有一个定时器运行
        clearInterval(obj.timer)
        obj.timer = setInterval(function () {


            if (obj.offsetLeft >= targrt) {
                clearInterval(obj.timer);
            }
            obj.style.left = obj.offsetLeft + 1 + 'px';
        }, 30)

    }
    //调用函数  传实参
    btn1.addEventListener('click', function () {
        animate(div, 800)
    })
    btn2.addEventListener('click', function () {
        animate(div, 400)
    })

</script>