JavaScript 无意中将 "translates"DOM 元素 id 字符串转换为 DOM 对象引用？

Question

假设我有这段代码:

function foo (id_of_dom_element, number){

    document.getElementById(id_of_dom_element).innerHTML=number;
    number = number + 1;
    setTimeout("foo(" + id_of_dom_element + "," + number + ")", 1000);
}

对该函数的初始调用:

foo("countdown", 0);

发生了什么:

• 第一次迭代时，一切都按预期进行
• 然而，在第二次迭代中，“id_of_dom_element”不再是字符串，而是 DOM 对象引用？

问题:

• 为什么会出现这种情况(我什至不知道如何搜索这个现象)？
• 如何防止这种情况发生？

非常感谢!

Answer 1

发生这种情况是因为您将字符串作为回调函数传递给 setTimeout 并且没有注意确保 id_of_dom_element 作为字符串本身传递，因此它引用自动创建的变量 window[id_of_dom_element] (即元素本身)。

如今，将函数作为字符串传递被认为是极其糟糕的做法 - 不要这样做!相反，传递一个匿名函数:

setTimeout(function() {
     foo(id_of_dom_element, number);
}, 1000);

更好的是，您可以这样封装整个行为:

function elementCounter(id, number) {
    var el = document.getElementById(id);
    (function loop() {
        el.innerHTML = number++;
        setTimeout(loop, 1000);
    })();  // loop is an "immediately invoked function expression"
}

请注意，在此版本中，所有“状态”都包含在外部作用域的变量中，因此 setTimeout 调用只需传递对 loop 函数的引用。