javascript - 收到新消息且选项卡处于非事件状态时，使标题弹跳的最佳方法？

Question

这是我目前所拥有的，但它很丑陋并且感觉不是最佳实践。例如，如果收到多条消息，它会多次启动 changeTitle 循环。

var hasFocus = true;
$(window).bind("blur", function() { 
    hasFocus = false;
});
$(window).bind("focus", function() {
    hasFocus = true;
    document.title = 'SiteName | Chat'; 
});
var i=0;
function changeTitle() {
    i++;
    if(i%2) {
        document.title = 'New message on SiteName!';
    }
    else {
        document.title = 'SiteName | Chat';
    }
    if(!hasFocus) {
        setTimeout('changeTitle()',1000);
    }
}

// Then I call changeTitle() when a new message is received.

Answer 1

这就是我最终所做的。

function changeTitle() {
    i++;
    if(i%2) {
        document.title = 'New message on mysite!';
    }
    else {
        document.title = 'MySite | Chat';
    }
    if(!hasFocus) {
        titleCurrentlyChanging = true;
        setTimeout('changeTitle()',1000);
    }
    else {
        titleCurrentlyChanging = false;
        i=0;
        document.title = 'MySite | Chat';
    }
}

在收到新消息时调用的 addMessage() 函数内:

if(!hasFocus && !titleCurrentlyChanging) {
    changeTitle();
}

在全局命名空间内:

var i = 0;
var titleCurrentlyChanging = false;

var hasFocus = true;
$(window).bind("blur", function() { 
    hasFocus = false;
});
$(window).bind("focus", function() {
    hasFocus = true;
    document.title = 'MySite | Chat'; 
});