如何减少和改进我丑陋的JavaScript代码？

Question

我尝试使用$(this).next()来控制最近的兄弟姐妹。但是在这个范围内，下一个兄弟姐妹还没有见过。如果我使用.each()函数，则该操作适用于数组中的所有元素，但它们同时执行。我希望在另一个动画完成之后看到每个动画都被播放。我想使用.on()和.trigger()函数，但我没有想法如何实现它们。

$('h1.main-logo-text').show().letterfx({
    "fx":"grow",
    "element_end":"destroy",
    "backwards":false,
    "timing":100,
    "fx_duration":"1000ms",
    onElementComplete: function(){
        $('#logoText1').show().letterfx({
            "fx":"grow",
            "element_end":"destroy",
            "backwards":false,
            "timing":100,
            "fx_duration":"1000ms",
            onElementComplete: function(){
                $('#logoText2').show().letterfx({
                    "fx":"grow",
                    "element_end":"destroy",
                    "backwards":false,
                    "timing":100,
                    "fx_duration":"1000ms",
                    onElementComplete: function(){
                        $('#logoText3').show().letterfx({
                            "fx":"grow",
                            "backwards":false,
                            "timing":100,
                            "fx_duration":"1000ms",
                        });
                    }
                });
            }
        });
    }
});

Answer 1

您可以定义一个函数来为每个元素调用;使用.queue()，.promise()在上一个动画完成时执行下一个动画

this.wsObservable.subscribe(data => {
  this.myData = data;
});