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() 到 return 一个可以用于 one 的闭包。但是 - 它不会，因为您的代码患有过早执行综合症。

您的 slider 函数创建一个闭包，然后 立即执行它 ，然后 return 是该执行的结果。由于内部闭包没有 return 语句，从 slider() 编辑的值 return 是 undefined，并且 one 没有得到任何处理程序来附加。

解决方案：从倒数第二行删除 ()。这应该使 slider() return 成为一个闭包而不是它的结果。

编辑： 你的 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>

JavaScript 闭包回调本身

JavaScript Closure Callback Itself

javascript

jquery

closures

callback