javascript - 此 javascript 函数和显示命令示例的更高效版本

Question

我对 JS 比较陌生，但我了解一些基本原理。然而，这会导致代码效率低下且乏味。

我想知道是否有一个更有效的版本，本质上就是这样

*

function gz2() {
    $('#GZ2').show(500);
    setTimeout(gz3, 2000);
}
function gz3() {
    $('#GZ3').show(500);
    setTimeout(gz4, 2000);
}
function gz4() {
    $('#GZ4').show(500);
    setTimeout(gz5, 2000);
}
function gz5() {
    $('#GZ5').fadeIn(200);
    setTimeout(gz6, 1000);
}
function gz6() {
    $('#GZ6').fadeIn(200);
    setTimeout(gReturn, 2000);
}
function gReturn(){
    $('.gammaZ').hide();
    setTimeout(gamma1, 0)
}

*

需要明确的是，这些都在 CSS 中设置为“display:none”，并通过 JavaScript 可见

是否有代码可以按顺序显示这些元素，而不必单独调用每个元素？特别是如果它们的可见性效果(show、fadeIn、slideDown)都相同？就像“所有此类，以两秒间隔显示，直到它们全部可见”

我问这个问题是因为这已经有效了......目前“很好”，但我最近在我的代码中达到了一个点，我必须用我目前的 JavaScript 知识连续做大约 40 个这样的事情，这不是我觉得舒服的事情，不仅因为它很单调，而且因为我相信有一种更简单的方法可以做到这一点，但我只是没有得到。

感谢任何帮助!

Answer 1

您可以使用回调函数序列

$('#GZ2').show(500, function(){
    $('#GZ3').show(500, function(){
        $('#GZ4').show(500, function(){
            $('#GZ5').fadeIn(200, function(){
                $('#GZ6').fadeIn(200, function(){
                    $('.gammaZ').hide();
                });
            });
        });
    });
});