Как заставить заголовок мигать, пока он не станет активным с помощью jQuery?

У меня есть чат на 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();

javascript notifications html jquery blink
person Benjamin Crouzier    schedule 30.09.2011    source источник
comment
Ваш рейтинг приема довольно низкий. Вам следует подумать о том, чтобы вернуться к своим старым вопросам и отметить те ответы, которые помогли решить вашу проблему. Некоторых здесь больше мотивируют очки, чем доброжелательность. В конечном итоге это будет беспроигрышным вариантом для вас и человека, который справедливо заслуживает баллов за вопрос :)   -  person Freesnöw    schedule 01.10.2011
comment
@David обновил вопрос.   -  person Benjamin Crouzier    schedule 01.10.2011

Ответы (4)


arrow_upward
22
arrow_downward

Полное решение:

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);
});
person Benjamin Crouzier    schedule 01.10.2011
comment
здесь - известное сообщение, а здесь плагин, заставляющий мигать заголовок, может кому-то помочь. - person Shaiju T; 24.07.2016

arrow_upward
1
arrow_downward

Ответ Пинушона работает, но если бы мне пришлось добавить интервальную проверку, чтобы не ускорить изменение заголовка, когда один человек отправлял сообщение несколько раз подряд. Так что у меня было

if(timeoutId)
 {
     clearInterval(interval);
 }

 interval = setInterval(changeTitle, 700);

Обычно, если интервал уже был установлен, очистите его, а затем сбросьте.

person rjg132234    schedule 06.11.2012

arrow_upward
0
arrow_downward

Просто не забудьте вызвать 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);
  });
})();
person jdeseno    schedule 01.10.2011
comment
Err. Вы используете setTimeout, поэтому используйте clearTimeout. setInterval в этом случае будет более последовательным, чем setTimeout, но используйте то, что вам подходит. - person jdeseno; 01.10.2011
comment
Кажется, что событие .focus(function() вызывается повторно, пока активна вкладка. Кроме того, есть синтаксическая ошибка (по крайней мере, в хроме). Я заменил function() на $(function() и убрал последний () - person Benjamin Crouzier; 01.10.2011
comment
Я исправил отсутствующий (, но фокус не должен вызываться несколько раз. Ваш код может вызывать фокус? Попробуйте вместо этого привязать к _2 _._ 3_? - person jdeseno; 01.10.2011

arrow_upward
0
arrow_downward

Вы можете попробовать это. Вы можете вызвать функцию мигания, чтобы начать переключение между двумя заголовками и остановить вызов, когда вам это больше не нужно.

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)
person nikksan    schedule 16.02.2018