使用 JavaScript 旋轉文檔標題

Question

我正在尋找使用 JS 旋轉網頁文檔標題。 例如：

將Domain.com更改為New Messgae - Domain.com ，然后返回 Domain.com 等等，這與 Facebook 在使用聊天時處理新消息的方式非常相似。

我研究過使用 SetInterval 但它只有一個表達式？ 是否可以更改此設置或使用 SetInterval 錯誤的功能？

$(document).ready(function () {

    setInterval(function () {
            $(document).attr('title', 'New Message — Domain.com');
        },
        2000);

});

Answer 1

$(document).ready(function() {
        var titles=['title1','title2','title3'];

        setInterval(function()
        {     
              $(document).attr('title', titles[0]);
              titles.push(titles.shift());
        },
        2000);

    });

Answer 2

好吧，您可以在不使用 JavaScript 庫的情況下做到這一點......

var title = document.getElementsByTagName('title');
var msg1 = "Domain.com";
var msg2 = "New Message - Domain.com"
var current;
var titleChange;

function changeTitle(){
  if(current == msg1){
   title = msg2;
   current = msg2;
  }else{ //If the current title isn't equal to the value of msg1
   title = msg1;
   current = msg1;
  }
 titleChange = setTimeout("changeTitle()", 1000);
}

function stopChangingTitle(){
 clearTimeout(titleChange);
 title = msg1;
}

我不能保證上面的代碼會起作用，但它應該起作用！

Answer 3

現在，您每 2 秒設置相同的新標題，即在第一次更改后您將看不到更改。 您需要存儲舊標題並在兩種狀態之間交替，顯示舊標題和新標題：

var oldTitle, timerId;

function flashTitle(newTitle) {
  var state = false;
  oldTitle = document.title;  // save old title
  timerId = setInterval(flash, 2000);

  function flash() {
    // switch between old and new titles
    document.title = state ? oldTitle : newTitle;
    state = !state;
  }
}

function clearFlash() {
  clearInterval(timerId);
  document.title = oldTitle; // restore old title
}

Answer 4

這就是我使用 Dr.Molle 的解決方案想到的。

function changeTitle (mytitle,count) {
    console.log(title_change);
    console.log(count);
    if (count >= 1) {
        var titles = [$('title').attr('data-title'),mytitle];
        title_change = setInterval(function(){     
             $(document).attr('title', titles[0]);
            titles.push(titles.shift());
        },
        1000);


    } else {
        clearInterval(title_change);
        //clearTimeout(title_change);
        title_change = false;
    }

        return false;

}

然而，當我在函數外聲明 title_change 時，我確實發現我似乎無法讓 setInterval 停止循環。 當計數到達但 >= 1 時，進程開始但當它返回為 0 時，clearInterval 和 clearTimeout 並沒有停止 change_loop。