Question

我从我正在观看的教程中看到这个动画示例：

(function() {

 var speed = 10,
 moveBox = function(moveBy) {
    var el = document.getElementById("box"),
        left = el.offsetLeft;


    if ((moveBy > 0 && left > 399) || (moveBy < 0 && left < 51)) {
        clearTimeout(timer);
        timer = setInterval(function() {
            moveBox(moveBy * -1);
        }, speed);
    }

    el.style.left = left + moveBy + "px";

};

var timer = setInterval(function () {
    moveBox(3);
}, speed);
}());

我很好奇clearTimeout（计时器）如何在clearTimeout函数之后定义计时器时抛出错误..

Answer 1

JavaScript变量被提升到封闭范围的顶部，因此您的代码或多或少等同于此：

(function() {
    var speed = undefined;
    var moveBox = undefined;
    var timer = undefined;

    speed = 10;
    moveBox = function(moveBy) { /* Stuff that uses timer ... */ };

    timer = setInterval(function () { ... }, speed);
}());

var timer位于顶部并且为整个函数声明timer并不重要。

MDN docs on var有一些关于吊装的信息。

Answer 2

JavaScript会在任何执行开始之前查看所有代码。

JS首先创建一个executionContext。

然后JS记录对所有函数和变量的引用，它们存储在executionContext的variableObject中。

这意味着在javascript开始执行代码之前，它甚至在开始解析执行顺序之前“知道”所有函数和所有变量。

请参阅此链接以获取更多信息，这些信息解释了JS如何创建闭包，还解释了JS如何编译代码：http://jibbering.com/faq/notes/closures/

setInterval，recursion，timer Id

2 个答案: