揭示模块模式和超时

Question

我想知道是否有人能给我一个简单的解决方案。

我想让两个狗实例重复树皮+摇尾巴的组合。

如果所有逻辑都包含在barkNameAndTime函数中，那就没问题，但是通过setTimout调用wagTail会丢失上下文。我写的JS不多，所以我的闭包知识有点生锈，我似乎找不到一个干净的解决方案。

问题是，Baloo最终完成了所有的叫声和尾巴摇摆，Lola消失在人群中:)

谢谢Warrick

<script type="text/javascript">
$(document).ready(function () {
    var zDog1 = new dog("Lola");
    var zDog2 = new dog("Baloo");

    zDog1.bark();
    zDog2.bark();
});

function dog(aName) {
    var name = aName,
        barkNameAndTime = function () {
            var time = new Date().getTime();
            $('#MyDiv').html($('#MyDiv').html() + "<br />" + name + " barked @ " + time);
            setTimeout(wagTail, 1000);
        };

        wagTail = function () {
            var time = new Date().getTime();
            $('#MyDiv').html($('#MyDiv').html() + "<br />" + name + "  wagged tail @ " + time);
            setTimeout(barkNameAndTime, 1000);
        }

    return {
        bark: barkNameAndTime
    };
}

​

Answer 1

在您的实现中，wagTail是一个全局变量(可能是错误的)，因此每次创建新的狗对象时，都会替换它的一个全局值和上下文。

如果您将其设置为局部变量(通过将一个分号更改为逗号)，它应该可以工作。

function dog(aName) {
    var name = aName,
        barkNameAndTime = function () {
            var time = new Date().getTime();
            $('#MyDiv').html($('#MyDiv').html() + "<br />" + name + " barked @ " + time);
            setTimeout(wagTail, 1000);
        }, 

        wagTail = function () {
            var time = new Date().getTime();
            $('#MyDiv').html($('#MyDiv').html() + "<br />" + name + "  wagged tail @ " + time);
            setTimeout(barkNameAndTime, 1000);
        }

    return {
        bark: barkNameAndTime
    };
}

当它是一个局部变量时，wagTail的每个副本都会保留自己的闭包上下文(从而访问同一堆栈帧中的局部变量)。当它是一个全局变量时，所有对wagTail的调用都将具有相同的上下文，这将是它上次被赋值时的上下文。

仅供参考，这是我不喜欢在有多行初始化器时声明局部变量的原因之一，因为一个细微的输入错误会呈现其中一些隐含的全局变量。我宁愿预先声明本地变量，然后在主体中为它们赋值。发生这种错误的可能性要小得多。或者，在这种情况下，您不需要使用变量语法，您可以只将barkNameAndTime和wagTail声明为本地函数(由Bergi添加的代码示例)：

function dog(name) {
    function barkNameAndTime() {
        var time = new Date().getTime();
        $('#MyDiv').html($('#MyDiv').html() + "<br />" + name + " barked @ " + time);
        setTimeout(wagTail, 1000);
    }
    function wagTail() {
        var time = new Date().getTime();
        $('#MyDiv').html($('#MyDiv').html() + "<br />" + name + "  wagged tail @ " + time);
        setTimeout(barkNameAndTime, 1000);
    }

    return {
        bark: barkNameAndTime
    };
}