javascript - 如何使标题闪烁，直到它被 jQuery 激活？

Question

我有一个 JavaScript 聊天。当用户收到消息时，我希望标题闪烁直到它变为活动状态。（如 Gmail 谈话）

例如：

• 您在另一个选项卡中。标题是My website
• 有人跟你说话。My website标题在和之间闪烁User says: bla bla
• 所以你点击标签，现在标题是My website

如何使用 jQuery 实现这一点？

---

到目前为止我尝试了什么：（闪烁永远不会停止播放）

var isOldTitle = true;
var oldTitle = "oldTitle";
var newTitle = "newTitle";
function changeTitle() {
     document.title = isOldTitle ? oldTitle : newTitle;
     isOldTitle = !isOldTitle;
     setTimeout(changeTitle, 700);
}
changeTitle();

Answer 1

完整解决方案：

var isOldTitle = true;
var oldTitle = "oldTitle";
var newTitle = "newTitle";
var interval = null;
function changeTitle() {
    document.title = isOldTitle ? oldTitle : newTitle;
    isOldTitle = !isOldTitle;
}
interval = setInterval(changeTitle, 700);

$(window).focus(function () {
    clearInterval(interval);
    $("title").text(oldTitle);
});

Answer 2

Pinouchon 的答案有效，但如果我必须添加间隔检查，那么当一个人连续多次发送消息时，它不会加速标题更改。所以我有

if(timeoutId)
 {
     clearInterval(interval);
 }

 interval = setInterval(changeTitle, 700);

基本上，如果已经设置了间隔，请将其清除然后重新设置。

Answer 3

只要记住调用clearInterval焦点：

(function() {
  var timer,
      title = $('title'),
      title_text = title.text();
  $(window).blur(function() {
    timer = setInterval(function() {
      title.text(title.text().length == 0 ? title_text : '');
    }, 2000)
  }).focus(function() {
    clearInterval(timer);
    title.text(title_text);
  });
})();

Answer 4

你可以试试这个。当您不再需要此功能时，您可以调用闪烁功能开始在两个标题之间切换并调用停止。

var title = document.title;
var interval = 0;

function blink(title1, title2, timeout){
    title2 = title2 || title;
    timeout = timeout || 1000;

    document.title = title1;
    interval = setInterval(function(){
        if(document.title == title1){
            document.title = title2;
        }else{
            document.title = title1;
        }
    }, timeout);
}

function stop(){
    clearInterval(interval);
    document.title = title;
}



blink('My blinking title!');
setTimeout(function(){
    stop();
}, 5000)