如何缩短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");
                                                                });
                                                            });
                                                        });
                                                    });
                                                });
                                            });
                                        });
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    });
});
});

- Uriel Frankel

---

“+1” 这是一个很大的“箭头”！ :) - Praveen Kumar Purushothaman

HTML长什么样？全局类可能解决这个庞大的JS :) - Riaan Walters

看一下这个链接http://paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/，它看起来正是你想要做的事情。 - Mihai

因为我只学习了2个小时的jQuery.. - Uriel Frankel

@UrielFrankel，您能否提供HTML代码以及您想要实现的功能？拜托了！我觉得这很容易做到！ - Praveen Kumar Purushothaman

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

- davehale23

---

这真是太美了。 - Uriel Frankel

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

---

顺便说一下，如果使用基于0的索引，编号通常会更简单。

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

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

- I Hate Lazy

---

@UrielFrankel：我的前一个答案中有一个错放的变量，我会修复它。应该是c类的总数。 - I Hate Lazy

一个区别是这个会一直循环，而 OP 不会，但因为简短而甜美加1。 - charlietfl

@charlietfl：你说得完全正确。出于某种原因，我认为那是意图。从网站上看似乎是这样，但也许并非如此。 - I Hate Lazy

@user1689607 我也不知道，只是指出来而已。我猜所有额外的类别除了隐藏元素之外并没有做太多事情，这可以很容易地通过 hide() 实现。 - charlietfl

太好了！我明天会试试这个。你们太棒了，我希望我能给你们所有人“接受”。 - Uriel Frankel

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

- Epsil0neR

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

- Ankur