javascript - 奇怪的 javascript 行为，这里会发生什么？

Question

考虑以下 javascript 函数:

function bs_animate_percentage(elem,style,unit,from,to,time) {
    if(!elem) return;

    console.log("first elem", elem);
    var start = new Date().getTime(),
        timer = setInterval(function() {
            console.log("second elem", elem);
            console.log("time", time);
            var step = Math.min(1,(new Date().getTime()-start)/time);
            elem.style[style] = (from+step*(to-from))+unit;
            if(step == 1) clearInterval(timer);
        },25);
    elem.style[style] = from+unit;
}

这个函数应该为加载栏设置动画，它取自另一个 stackOverflow 问题。我还想为动画添加文本更改，为此我需要初始元素的父元素。

当我使用以下参数运行此函数时，控制台会记录以下值:

    bs_animate_percentage(document.getElementById("progress-bar"), 'width', '%', 0, 100, 60000);

    *** LOGS ***
    "first elem", <div....> (the selected div)
    "second elem", undefiend
    "time", 600000   

基本上，在 main 函数中，elem 是已知的并且具有预期的值。但是在匿名函数内部，elem 被注销为未定义，如果我尝试获取它的父级，它也是未定义的，但是，样式属性按预期工作，因为 elem 的宽度正在改变。我在 chrome 中遇到过这种情况，这里可能是什么问题？

编辑: 我也在 Firefox 中检查过，但奇怪的是，正确的结果在第二个控制台日志中传回。这一定是 Chrome 特有的东西，但我不知道是什么......

EDIT2: 更奇怪的是，当尝试在 jsfiddle 中复制此行为时，它不会持续存在，无论是在 Chrome 还是 Firefox 中。那我该去哪里找问题呢？

Answer 1

我很确定 elem 变量在此期间未设置。我的预测是它有时会过去。验证这一点的方法之一如下:

function bs_animate_percentage(elem,style,unit,from,to,time) {
    if(!elem) return;

    console.log("first elem", elem);
    var x = elem.cloneNode(true);
    var start = new Date().getTime(),
        timer = setInterval(function() {
            console.log("second elem", x);
            console.log("time", time);
            var step = Math.min(1,(new Date().getTime()-start)/time);
            elem.style[style] = (from+step*(to-from))+unit;
            if(step == 1) clearInterval(timer);
        },25);
    elem.style[style] = from+unit;
}

我相信这会没事的。它会确认你的问题。接下来是如何解决它。elem 是 dom 元素还是其他元素？是否在 chrome 中进行了修改？更好的方法是给这个元素一个 id，然后通过 id 获取它并设置它的样式如下，仅当您不希望在代码中调试问题时才这样做。

function bs_animate_percentage(elem,style,unit,from,to,time) {
        if(!elem) return;

        console.log("first elem", elem);
        var x = elem.cloneNode(true).id;
        var start = new Date().getTime(),
            timer = setInterval(function() {
                // Or some similar logic
                x = document.getElementById(x);
                console.log("second elem", x);
                console.log("time", time);
                var step = Math.min(1,(new Date().getTime()-start)/time);
                elem.style[style] = (from+step*(to-from))+unit;
                if(step == 1) clearInterval(timer);
            },25);
        elem.style[style] = from+unit;
    }