为img上的闪烁动画设置时间 [英] Setting a time for flicker animation on img

问题描述

我正在使用此代码使我的徽标在我的网站上闪烁.但是，当浏览过程中它继续闪烁时，它变得很烦人，如何设置时间使其在页面加载的前15秒内闪烁，然后停止呢?

I'm using this code to make my logo flicker on my website. But It becomes annoying when it continues to flicker while browsing, how can I set a time to allow it to flicker for something like the first 15seconds on page load, then stops?

JS代码:

$(document).ready(
function(){
    var t;
    const fparam = 100;
    const uparam = 100;
    window.flickr = function(){
        if(Math.round(Math.random())){
            $("#logodcoi").css("visibility","hidden");
            t = setTimeout('window.unflickr()',uparam);
        }
        else
            t = setTimeout('window.flickr()',fparam);
    }
    window.unflickr = function(){
        if(Math.round(Math.random())){
            $("#logodcoi").css("visibility","visible");
            t = setTimeout('window.flickr()',fparam);
        }
        else
            t = setTimeout('window.unflickr()',uparam);
    }

    t = setTimeout('window.flickr()',fparam);
});

推荐答案

您可以拥有一个计数器，然后使用该计数器来决定是否要设置另一个超时.附带说明，永远不要将函数添加到window，然后将字符串传递给setTimeout.始终只需传递函数本身即可:

You could have a counter, which you then use to decide whether you want to set another timeout. As a side note, you should never add functions to window and then passing a string to setTimeout. Always just pass the function itself:

$(document).ready(function(){
    var t;
    var amount = 0;
    const fparam = 100;
    const uparam = 100;

    function timeout(f, t) {   // this function delegates setTimeout
        if(amount++ < 150) {   // and checks the amount already (un)flickered
             setTimeout(f, t); // (150 * 100 ms = 15 s)
        }
    }

    var flickr = function(){
        if(Math.round(Math.random())){
            $("#logodcoi").css("visibility","hidden");
            t = timeout(unflickr,uparam);
        }
        else
            t = timeout(flickr,fparam);
    };

    var unflickr = function(){
        if(Math.round(Math.random())){
            $("#logodcoi").css("visibility","visible");
            t = timeout(flickr,fparam);
        }
        else
            t = timeout(unflickr,uparam);
    };

    t = timeout(flickr,fparam);
});

这篇关于为img上的闪烁动画设置时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！