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>