JavaScript 闭包回调本身

Question

这是我写的闭包:

var slider = (function(){
    var count = 3;
    return function(){
        if (count>0) {
            $("#message").html("<h1>"+count+"</h1>");
            count--;
            $("#message").removeClass("animated zoomIn");
            $("#message").addClass("animated zoomIn");
            $("#message").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",  function(){
                return slider();
            }());   
        } else{
            showCube();
        }
    }()
});

这个闭包由 jquery 插件执行:

$("#fishes").addClass("animated slideOutLeft").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", slider());

但是，回调没有被执行。有人可以指导我正确的方向吗？

Answer 1

按照我的理解，您希望 slider() 返回一个可用于 one 的闭包。然而，事实并非如此，因为您的代码患有过早执行综合症。

您的slider函数创建一个闭包，然后立即执行它，然后返回该执行的结果。由于内部闭包没有 return 语句，因此 slider() 返回的值是 undefined，而 one 则没有无法附加任何处理程序。

解决方案:删除倒数第二行中的()。这应该使 slider() 返回一个闭包而不是其结果。

编辑:你的function() { return slider(); }() 相当于 slider()，它构造一个新的闭包，其中 count 为 3。将其替换为 arguments.callee，以提供与当前正在执行的相同的闭包。

var slider = (function(){
    var count = 3;
    return function(){
        if (count>0) {
            $("#message").html("<h1>"+count+"</h1>");
            count--;
            $("#message").one("click", arguments.callee);   
        } else{
            alert("The End");
        }
    }
});
$('#message').one('click', slider());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="message">Click me!</div>

或者，您可以为其命名，以便可以直接引用它:

var slider = (function(){
    var count = 3;
    return function sliderClosure(){
        if (count>0) {
            $("#message").html("<h1>"+count+"</h1>");
            count--;
            $("#message").one("click", sliderClosure);   
        } else{
            alert("The End");
        }
    }
});
$('#message').one('click', slider());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="message">Click me!</div>