javascript - 设置img上闪烁动画的时间

Question

我正在使用此代码使我的 Logo 在我的网站上闪烁。但是，当它在浏览时继续闪烁时，它会变得很烦人，我如何设置一个时间，让它在页面加载时闪烁大约 15 秒，然后停止？

我正在使用的 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);
});

Answer 1

您可以有一个计数器，然后用它来决定是否要设置另一个超时。附带说明一下，您绝对不应该向 window 添加函数，然后将字符串传递给 setTimeout。始终只传递函数本身:

$(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);
});