0

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

(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 函数之后定义的。

4

2 回答 2

3

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 文档上var有一些关于提升的信息。

于 2013-07-07T02:55:43.850 回答
2

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

JS 首先创建一个 executionContext。

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

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

有关解释 JS 如何创建闭包的更多信息，请参阅此链接，但也总体上解释了 JS 如何编译代码：http: //jibbering.com/faq/notes/closures/

于 2013-07-07T02:58:53.990 回答