设置最小时间和超时时间

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是您正在侦听的事件。如果这不是期望的效果，应该可以很容易地将其调整到另一个事件或在另一个时间运行。