jquery - jQuery多个setTimeout代码乱七八糟

Question

我正在尝试使用 jQuery 中的 setTimeout 函数来创建动画。效果很好，动画也很完美，但是我的代码现在太乱了。

setTimeout(function() {
            $('p').fadeOut();

            setTimeout(function() {
                var heightLoading = $('#loading').height();
                $("#loading").css("margin-top", height);
                $('#loading').html("Anyways, I am a <span>Web Designer</span> and <span>Front-end Developper</span>").fadeIn();

                setTimeout(function() {
                    $('#name').fadeIn();
                }, 2000);
            }, 1000)
        }, 3000);

      }, 800);
}, 2000);

有不同的方法吗？现在它是一个 setTimeout 中的一个 setTimeout，等等。如果我继续这样下去，这真的很令人困惑。

提前致谢！

Answer 1

您可以通过跳过 setTimeout 并使用内置的计时和回调来简化链接：

$('p').fadeOut(800, function () { var heighLoading.... 

如果您想进一步删除函数嵌套，这里有一个插件可能会有所帮助：

http://creativecouple.github.io/jquery-timing/