如何缩短jQuery函数？

Question

I have this jQuery function that work. Every 2 lines is the same except a minor changes. How can I shorten it?

$(".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

You could use a recursive function like this:

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

It seems that the #phone element is the only one that ever gets the c_ class. If so, you can cache the element and eliminate a bunch of code.

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

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

---

We can even get rid of a line of code by inlining the increment.

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

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

---

As @charlietfl noted, you may not want it to infinitely loop. If not, add a return statement.

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

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

---

And FWIW, numbering is usually a little simpler if you use 0 based indices.

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

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

Answer 3

You can use something like that:

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");
        }
    }
} 

Then add to your code:

inception(1,9);

Answer 4

I don't know something like this?

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();