替代重复的JQuery回调？

Question

我的代码会在重复点击“目标”后连续淡化元素。元件。是否有另一种方法（更好的＆＃39;）实现此目的，而不是将下一个点击事件作为前一个点击事件的回调？

$(document).ready(function () {

$(".preHide").hide();

$("#target").click(function () {
    $("#fade1").fadeIn(2000, function () {
        $("#target").click(function () {
            $("#fade2").fadeIn(2000, function () {
                $("#target").click(function () {
                    $("#fade3").fadeIn(2000, function () {
                        $("#target").click(function () {
                            $("#fade4").fadeIn(2000, function () {
                                $("#target, .targetWrapper").fadeOut();
                                $("#fade5").fadeIn();
                            });
                        });
                    });
                });
            });
        });
    });
});
});

这很容易阅读，但似乎不必要的冗长。

Answer 1

现在你绑定4个点击事件，这当然不是理想的。这个简化的方法怎么样？

var clicks = 0;

$("#target").click(function() {
    var callback = ++clicks < 5 ? $.noop : function() {
        $("#target, .targetWrapper").fadeOut();
        $(this).fadeIn();
    };
    $("#fade" + clicks).fadeIn(2000, callback);
});

演示：http://jsfiddle.net/94vmt4fk/1/