javascript - setTimeout 完成后调用函数

Question

下面是函数 fadeItem()，将在 DOM 加载后 1 秒后运行，现在我想在 fadeItem() 完成后调用另一个函数。

HTML

<ul class="navigation ui-slider-tabs-list">
   <li style="" class="effect selected hide_selected"> <a id="" href="#company-profile">
      Company Profile                                                </a>
   </li>
   <li style="" class="effect"> <a id="" href="#sg-corporate-value">
      SG Corporate Value                                                </a>
   </li>
   <li style="" class="effect"> <a id="" href="#sg-corporate-philosophy">
      SG Corporate Philosophy                                                 </a>
   </li>
   <li style="" class="effect"> <a id="" href="#sg-critical-success-factors">
      SG Critical Success Factors                                                 </a>
   </li>
</ul>

JS

$(document).ready(function () {

    function fadeItem() {
        $('ul.navigation li:hidden:first').delay(100).fadeIn(fadeItem);
    }

    setTimeout(function () {
        // Do something after 1 second 
        fadeItem();     

    }, 1000);

    // try to run this after fadeItem() finish
    $('.ui-slider-tabs-list li.selected').removeClass('hide_selected');  <----

    $('ul.navigation li').hide();  

});

CSS

a {
    text-decoration:none;
}
.selected a {
    text-decoration: underline;
}
.hide_selected a {
    text-decoration: none!important;
}

问题是 fadeItem() 和removeClass() 同时运行。我想先运行 fadeItem()，然后运行 ​​removeClass()。

因此，结果应该是在 fadeItem() 动画完成之后而不是开始时为公司简介的下划线链接。

你可以查看我的 fiddle HERE

Answer 1

在回调函数中输入淡出后想要显示的内容，如下所示:

 function fadeItem() {
    $('ul.navigation li:hidden:first').delay(100).fadeIn(function(){
        $(this).removeClass('hide_selected');
        fadeItem();
    });
}

如果需要在他显示所有元素后删除该类，因此:

 function fadeItem() {
    if($('ul.navigation li:hidden').length>0){
        $('ul.navigation li:hidden:first').delay(100).fadeIn(function(){
            fadeItem();
        });
    } else {
        $('.ui-slider-tabs-list li.selected').removeClass('hide_selected');
    }
}