Как заставить заголовок мигать, пока он не станет активным с jQuery? - PullRequest
4 голосов
/ 01 октября 2011

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

Ответы [ 4 ]

19 голосов
/ 01 октября 2011

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

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);
});
1 голос
/ 06 ноября 2012

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

if(timeoutId)
 {
     clearInterval(interval);
 }

 interval = setInterval(changeTitle, 700);

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

0 голосов
/ 16 февраля 2018

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

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)
0 голосов
/ 01 октября 2011

Просто не забудьте позвонить 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);
  });
})();
...