來回閃爍的圖標

Question

我正在嘗試運行一些代碼來無限期地每秒在2 .ico之間來回閃爍圖標。 到目前為止，我已經有了這段代碼，它可以一次更改，但不會再次更改。

var favUrl = "favicon.ico";
var flashFavIco = function() {
    if(favUrl == "favicon.ico") {
        favUrl = "favicon-white.ico";
    } else {
        favUrl = "favicon.ico";
    }
    console.log(favUrl);
    var link = document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'http://www.mysite.com/' + favUrl;
    document.getElementsByTagName('head')[0].appendChild(link);
};
setInterval(flashFavIco, 1000);

我測試了在if / else部分中添加console.log() ，以檢查favURL是否設置了favURL ，的確如此。 所以我對為什么圖標僅更改一次感到有些困惑。 這是瀏覽器問題嗎？

編輯：我確實意識到這會不斷向頭部添加新的<link ...標簽，並且我正在以不同的方式編寫那個appendChild部分，這不會影響我的原始問題

Answer 1

我重新編寫了其中的一部分，現在使它起作用了。

var favUrl = "favicon.ico";
var link = document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'http://www.mysite.com/' + favUrl;
    link.id = "favico";
document.getElementsByTagName('head')[0].appendChild(link);

var flashFavIco = function() {
    if(favUrl == "favicon.ico") {
        favUrl = "favicon-white.ico";
    } else {
        favUrl = "favicon.ico";
    }
    $('#favico').prop('href', 'http://www.mysite.com/' + favUrl);
};
setInterval(flashFavIco, 1000);

Answer 2

為您重寫。

// Edit these
var faviconNormal = "/faviconNormal.ico";
var faviconActive = "/faviconActive.ico";
var faviconID = "#myfavicon"; // CSS selector for your <link> element

// Declarations
var faviconElement = document.querySelector(faviconID);
var faviconIsActive = false;

function flashFavicon() {
    if (faviconIsActive == false) {
        changeFavicon(faviconActive);
        faviconIsActive = true;
    }
    else {
        changeFavicon(faviconNormal);
        faviconIsActive = false;
    }
}

function changeFavicon(src) {
    faviconElement.href = src;
}

// Run
var initFlashing = setInterval(flashFavicon, 1000);