设置最短时间和超时

Posted 2023-03-16

【中文标题】设置最短时间和超时

【英文标题】：Set minimum time and timeout

【发布时间】：2014-09-15 10:32:19

【问题描述】：

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

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

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

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

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

【参考方案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 是您正在监听的事件。如果这不是所需的效果，应该很容易将其适应另一个事件或在另一个时间运行。

【讨论】：

当他们访问根域 (www.championfreight.co.nz) 而不是返回主页 (www.championfreight.co.nz/index) 时是否有设置最小超时?希望这是有道理的。基本上，我希望访问者在他们最初访问网站/主页时看到动画，而不是在他们浏览网站并返回主页时看到动画。

再次感谢亚历山大。这是最终结果 - www.championfreight.co.nz

您可以使用 html5 本地存储 (developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/…) 或 cookie 来做到这一点。