javascript - setInterval 执行动画之后的重置问题

Question

主要问题描述是这样的：

使用原生js做一个动画效果，将元素通过setInterval左移一段距离之后，停止动画，并将该元素重置到某个特定的位置

html是这样的：

<p data-id="foo"></p>

CSS只是渲染一下样式：

p[data-id=foo] {
    width: 10em;
    height: 10em;
    display: block;
    position: relative;
    background-color: deeppink;
    margin: 50px auto;
}

js：

function interval () {
            console.log('架构函数');
        }

interval.prototype.run = function() {
    // 获取元素
    var foo = document.querySelector('[data-id=foo]');
    // 设置动画
    var _run = setInterval(function () {
        var _left = foo.style.left ? parseInt(foo.style.left) : 0;
            var _limit = Math.abs(_left);
            
            // 如果大于某个值就停止动画
            if (_limit > 100) {
                clearInterval(_run);
                // 问题在这里，如何才能在清除动画之后把元素重置到某个具体的位置呢？
                // 这里如果用console.log打印，那么打印出的数据是正确的，但是位置就是不对！
                // 在动画完成后，在浏览器中获取该元素的left值，还是动画停止的时候的值
                foo.style.left = 0 + 'px';
            }

            foo.style.left = _left - 10 + 'px';
        }, 20)
    }

// 测试
var test = new interval();
test.run();