编写 jQuery 函数的更好方法答案

【问题标题】：A better way to write jQuery functions编写 jQuery 函数的更好方法
【发布时间】：2014-04-18 22:24:49
【问题描述】：

这是我编写的函数，目前在我的项目中使用但我想确定是否有更好的方法来编写它：

function pageLoader(pageIndex) {

    $(".ServicesSectionWrapper,.ServicesSectionWrapper .Selector,.ServicesSection,.JournalSectionWrapper,.JournalSectionWrapper .Selector,.JournalSection,.AboutSectionWrapper,.AboutSectionWrapper .Selector,.AboutSection").hide();

    switch (pageIndex) {

    case 1:
        $(".AboutSectionWrapper").fadeIn(400, function () {
            $("#AboutWrapper").fadeIn(400, function () {
                $("#ManagerWrapper").fadeIn(400, function () {
                    $("#DeveloperWrapper").fadeIn(400, function () {
                        $("#DesignerWrapper").fadeIn(400, function () {
                            $(".AboutSection").fadeIn(400, function () {
                                $(".AboutSection").addClass("PreLoadRotate")
                            })
                        })
                    })
                })
            })
        });
        break;

    case 2:
        $(".JournalSectionWrapper").fadeIn(400, function () {
            $("#DateOne").fadeIn(400, function () {
                $("#DateTwo").fadeIn(400, function () {
                    $("#DateThree").fadeIn(400, function () {
                        $("#DateFour").fadeIn(400, function () {
                            $("#DateFive").fadeIn(400, function () {
                                $("#DateSix").fadeIn(400, function () {
                                    $("#DateSeven").fadeIn(400, function () {
                                        $("#DateEight").fadeIn(400, function () {
                                            $(".JournalSection").fadeIn(400, function () {
                                                $(".JournalSection").addClass("PreLoadRotate")
                                            })
                                        })
                                    })
                                })
                            })
                        })
                    })
                })
            })
        });
        break;

    case 3:
        $(".ServicesSectionWrapper").fadeIn(400, function () {
            $("#AppsWrapper").fadeIn(400, function () {
                $("#ResponsiveWrapper").fadeIn(400, function () {
                    $("#DigitalWrapper").fadeIn(400, function () {
                        $("#PTRWrapper").fadeIn(400, function () {
                            $(".ServicesSection").fadeIn(400, function () {
                                $(".ServicesSection").addClass("PreLoadRotate")
                            })
                        })
                    })
                })
            })
        });
        break;

    }
}

这是 HTML：

    <div class="AboutSectionWrapper">

        <div class="Selector" id="AboutWrapper"></div>
        <div class="Selector" id="DesignerWrapper"></div>
        <div class="Selector" id="ManagerWrapper"></div>
        <div class="Selector" id="DeveloperWrapper"></div>

    <div class="AboutSection">
        <div class="Indicator"></div>
        </div>

      </div>

这是一个菜单（AboutSectionWrapper），如您所见，它有选择器，我想先加载菜单，然后依次加载选择器，最后淡入菜单指示器并添加一个 CSS 类，其中有一个转换。

其他情况也是如此，但例如在 CASE 2 中有更多的选择器！

请指教，谢谢。

【问题讨论】：

也试试 codereview.stackexchange.com。
谢谢你，Marco 我刚刚做到了。
看到这个我就慌了。
@EricHerlitz 这就是我的朋友我顺序淡入元素的重点，仅此而已，HTML 中只有一些带有这些 ID 和类的 Div 元素，这就是我没有发布 HTML 的原因部分。
这个问题似乎是题外话，因为它是关于修改/改进代码（这显然有效？）而不是解决编码问题。此外，OP 似乎不愿意澄清问题或提供相关的、必要的 HTML，jQuery/JavaScript 显然应该在这些 HTML 上工作。

标签： jquery performance function optimization

【解决方案1】：

我在做一些假设……但是……

代码的逻辑似乎是淡入一个元素，然后淡入一个孩子（或兄弟姐妹？）虽然最初的选择器是一个类，但后续的id我不确定。

我会使用类标识符而不是 ID。并将其与 child 或 nextSibling 结合以在递归函数中调用淡入淡出。

所以（在此处输入，未经测试）类似...

case n:
    fadein(<rootselector>)
case m:

...

function fadein(selector)  {
    $(selector).fadeIn(400, function () {
        if ($(selector).nextSibling(<classselector>)) {
            fadein($selector.nextSibling(<classselector>);
}   }   }

【讨论】：

【解决方案2】：

简而言之，我会这样做：

$('.date').each(function(i){
    $(this).fadeIn(400*i);
});

你知道我要做什么了吗？

【讨论】：

【解决方案3】：

这可以通过多种方式完成。这是一个 1:am 解决方案，非常简单，可以改进和改进，但您会明白的！

// Construct an object structure with your chains instead
var elementAnimation = [{
    "element": ".AboutSectionWrapper",
    "effect": "fadeIn",
    "duration": 400
},{
    "element": "#AboutWrapper",
    "effect": "fadeIn",
    "duration": 400
},{
    "element": ".AboutSection",
    "effect": "addClass",
    "className": "PreLoadRotate"
}]

// Simple but effective callback handler
function MyCallback(index){

    if(elementAnimation.length <= index) return;
    var obj = elementAnimation[index];
    index++;

    if(obj.effect == "fadeIn") {
        $(obj.element).fadeIn(400, MyCallback(index))
    }

    if(obj.effect == "addClass") {
        $(obj.element).addClass(obj.className);
        MyCallback(index); // If necessary
    }
}

// Start
MyCallback(0);

你可以在 json 中实现更多的 intel，很简单吧 :)

【讨论】：

【解决方案4】：

这可能是我会做的：

function runFades(selectors, i) {
    i = i || 0;
    $(selectors[i]).fadeIn(400, function() {
        if (i < selectors.length) {
            runFades(selectors, i+1);
        }
        else {
            $(selectors[i-1]).addClass("PreLoadRotate");
        }
    });
}

然后在你的 case 语句中运行它：

switch (pageIndex) {
    case 1:
        runFades(['.AboutSectionWrapper', '#AboutWrapper', ... ]);
        break;
    ...
}

【讨论】：