设置最短时间和超时

Question

我有在后台加载网页时显示的加载动画。一旦加载完成，它就会消失。

我想要什么... 1. 动画至少出现 1 秒。 2. 1 秒的最短时间到期后，动画将在页面加载后自然删除。 3. 为避免出现故障的可能性（以及观看无休止的动画循环），我希望动画在加载时间超过 5 秒时超时。

这是我目前所拥有的......

$(window).load(function()
{ 
$('#followingBallsG').hide(); 
$('#backgroundcolor').hide(); 
});

您能提供的任何帮助将不胜感激。谢谢。

Answer 1

没有用于此的内置 jQuery 功能。您需要为此写出逻辑。这是一个简单的实现，没有竞争条件。

(function(){
    var didDone = false;
    function done() {
        //Prevent multiple done calls.
        if(!didDone)
        {
            didDone = true;
            //Loading completion functionality here.
            $('#followingBallsG').hide();
            $('#backgroundcolor').hide();
        }
    }
    //Variables to keep track of state.
    var loaded = false;
    var minDone = false;
    //The minimum timeout.
    setTimeout(function(){
        mindone = true;
        //If loaded, fire the done callback.
        if(loaded)
        {
            done();
        }
    }, 1000);
    //The maximum timeout.
    setTimeout(function(){
        //Max timeout fire done.
        done();
    }, 5000);
    //Bind the load listener.
    $(window).load(function(){
        loaded = true;
        //If minimum timeout done, fire the done callback.
        if(minDone)
        {
            done();
        }
    });
})();

我已经将它包装在一个立即调用的函数表达式中，并假设$(window).load 是您正在监听的事件。如果这不是所需的效果，应该很容易将其适应另一个事件或在另一个时间运行。