如何使标题闪烁，直到它成为活跃的jQuery

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

本文关键字：活跃 jQuery 标题 何使 闪烁      更新时间：2023-09-26

我有一个javascript聊天。当用户收到消息时，我希望标题闪烁，直到激活为止。(如Gmail Talk)

例如:

  • 您在另一个选项卡中。标题为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();

完整解决方案:

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

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

if(timeoutId)
 {
     clearInterval(interval);
 }
 interval = setInterval(changeTitle, 700);

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

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

你可以试试这个。你可以调用blink函数来开始在两个标题之间切换，当你不想再这样做的时候，可以调用stop函数。

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)
相关文章：