JavaScript-232：给不同的元素指定了不同的定时器

效果图

结构

   <button>点击夏雨荷才走</button>
   <div></div>
   <span>夏雨荷</span>

CSS

        div {
    
    
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        span {
    
    
            position: absolute;
            left: 0;
            top: 150px;
            background-color: red;
            width: 100px;
            height: 100px;
        }

js

        // var obj = {};
        // obj.name = 'andy';
        // 简单动画函数封装obj目标对象 target 目标位置
        // 给不同的元素指定了不同的定时器
        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(div, 300);
        btn.addEventListener('click', function ()
        {
    
    
            animate(span, 300);
        })