javascript - 如何缩短 jQuery 函数？

Question

我有这个工作的 jQuery 函数。每 2 行都是相同的，除了细微的变化。我怎样才能缩短它？

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

---

0FWIW，如果您使用基于索引，编号通常会更简单一些。

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