javascript - 如何在 setTimeout JavaScript 后触发一个 Action

Question

jsfiddle

我正在创建一个名为 preLoader() 的函数，并且我正在使用 setTimeout() 因为我想让它只运行一次。
当 preloader() 函数完成时，我想隐藏:

<div class="loader">
 <h2 id="loading">0%</h2>
 <h3 id="pleaseWait"></h3>
</div> 

并显示:

<div class="mainContent"></div>

Answer 1

因为您正在使用 animate()，所以您实际上不必同时使用 setTimeout 和 setInterval。只需在动画的 complete 回调中隐藏/取消隐藏内容。

function preLoader(){
    // animating numbers
    var arrayPleaseWait = ['P','L','E','A','S','E', ' ' , 'W','A','I','T','.','.','.'];
    var searchReturn = '';
    var current = null;
    var wait = $('#pleaseWait');

    $('body').css({
        'backgroundColor':'#E2F7FA'
    });
    $('.mainContent').hide();

    $('#loading').animate({
        someValue: 100
    },{
        duration: 10000,
        easing:'swing',
        step: function() {
            var l = Math.round(Math.round(this.someValue) * (arrayPleaseWait.length-1) / 100) || 0;
            if(current != l){
                searchReturn = searchReturn + arrayPleaseWait[l];
                wait.text(searchReturn + '|');
                current = l;
            }
            $(this).text(Math.round(this.someValue) + '%');
        },
        complete : function(){
            $('.loader').hide();
            $('.mainContent').show();
        }
    });

}

preLoader();

JSfiddle demo