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

How to make a title blink until it becomes active with jQuery?

提问by Benjamin Crouzier

I have a javascript chat. When a user receives a message, I want the titleto blink until it becomes active. (like Gmail Talk)

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

For example:

例如：

• You are in an other tab. Title is My website
• Someone talks to you. Title blinks betwen My websiteand User says: bla bla
• So you click the tab, and now the title is My website

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

How can I achieve that using jQuery ?

我如何使用 jQuery 实现这一目标？

---

---

What i tried so far: (blinking never stop playing)

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

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

回答by Benjamin Crouzier

Full solution:

完整解决方案：

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

回答by rjg132234

Pinouchon's answer works but if I had to add an interval check so it didn't speed up the title changing when one person messaged multiple times in a row. So I had

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

if(timeoutId)
 {
     clearInterval(interval);
 }

 interval = setInterval(changeTitle, 700);

Basically if the interval had already been set, clear it and then reset it.

基本上，如果间隔已经设置，清除它然后重置它。

回答by nikksan

You can try this one. You can call the blink function to start switching between two titles and call stop, when you dont want this anymore.

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

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)

回答by jdeseno

Just remember to call clearIntervalon focus:

请记住调用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);
  });
})();