如何縮短jQuery函數？

Question

我有這個jQuery函數可以工作。 除了微小的變化外，每兩行是相同的。 我怎樣才能縮短它？

$(".c1").delay(5000).fadeOut("slow", function() {
    $("#phone").addClass("c2").fadeIn("slow", function() {
        $(".c2").delay(5000).fadeOut("slow", function() {
            $("#phone").addClass("c3").fadeIn("slow", function() {
                $(".c3").delay(5000).fadeOut("slow", function() {
                    $("#phone").addClass("c4").fadeIn("slow", function() {
                        $(".c4").delay(5000).fadeOut("slow", function() {
                            $("#phone").addClass("c5").fadeIn("slow", function() {
                                $(".c5").delay(5000).fadeOut("slow", function() {
                                    $("#phone").addClass("c6").fadeIn("slow", function() {
                                        $(".c6").delay(5000).fadeOut("slow", function() {
                                            $("#phone").addClass("c7").fadeIn("slow", function() {
                                                $(".c7").delay(5000).fadeOut("slow", function() {
                                                    $("#phone").addClass("c8").fadeIn("slow", function() {
                                                        $(".c8").delay(5000).fadeOut("slow", function() {
                                                            $("#phone").addClass("c9").fadeIn("slow", function() {
                                                                $(".c9").delay(5000).fadeOut("slow", function() {
                                                                    $("#phone").addClass("c1").fadeIn("slow");
                                                                });
                                                            });
                                                        });
                                                    });
                                                });
                                            });
                                        });
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    });
});
});

Answer 1

您可以使用這樣的遞歸函數：

function phoneCall(i){
    $(".c" + i).delay(5000).fadeOut("slow", function() {
        $("#phone").addClass("c" + (i + 1)).fadeIn("slow", function() {
            if(i <= 9) phoneCall(i + 1);
        });
    });            
} 
phoneCall(1);

Answer 2

似乎#phone元素是唯一一個獲得c_類的元素。 如果是這樣，您可以緩存元素並消除一堆代碼。

var phone = $("#phone"), i = 0;

(function cycle() {
    i = ((i % 9) + 1);
    phone.addClass("c" + i).fadeIn("slow").delay(5000).fadeOut("slow", cycle);
})();

---

我們甚至可以通過內聯增量來擺脫一行代碼。

var phone = $("#phone"), i = 0;

(function cycle() {
    phone.addClass("c" + ((++i % 9) + 1)).fadeIn("slow").delay(5000).fadeOut("slow", cycle);
})();

---

正如@charlietfl所說，你可能不希望它無限循環。 如果沒有，請添加一個return語句。

var phone = $("#phone"), i = 0;

(function cycle() {
    if (i === 9) return;
    phone.addClass("c" + ((++i % 9) + 1)).fadeIn("slow").delay(5000).fadeOut("slow", cycle);
})();

---

而對於FWIW，如果使用基於0的索引，編號通常會更簡單一些。

var phone = $("#phone"), i = -1;

(function cycle() {
    phone.addClass("c" + (++i % 9)).fadeIn("slow").delay(5000).fadeOut("slow", cycle);
})();

Answer 3

你可以使用這樣的東西：

function inception(fromInt, tillInt){
    if (fromInt < tillInt){
        $('.c' + fromInt).delay(5000).fadeOut("slow",function(){
            newInt = fromInt +1;
            $('#phone').addClass('c'+newInt).fadeIn("slow", function() {
                inception(newInt, tillInt));
            }
        });
    }else{
        if(fromint == tillInt){
            $('.c' + fromInt).delay(5000).fadeOut("slow");
        }
    }
} 

然后添加到您的代碼：

inception(1,9);

Answer 4

我不知道這樣的事嗎？

var num = 2;

var HandlerForC = function () {
    if (num < 10) {
        $("#phone").addClass("c" + num).fadeIn("slow", HandlerForPhone);
    } else {
        $("#phone").addClass("c1").fadeIn("slow");
    }

}

var HandlerForPhone = function () {
    num++;
    $(".c" + (num - 1)).delay(5000).fadeOut("slow", HandlerForC);
}
HandlerForPhone();