Question

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

我希望这两个狗实例重复树皮+摇尾组合。

如果所有逻辑都包含在barkNameAndTime函数中，我很好，但是通过setTimout调用wagTail我失去了上下文。我写的JS不多，所以我的封闭知识是一个小问题，我似乎找不到一个干净的解决方案。

问题是，Baloo最终做了所有的吠叫和尾巴摇摆，而Lola在人群中迷失了：）

由于瓦里克

<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
    };
}

揭示模块模式和超时

1 个答案: