每次收到新消息时更新标题中的值

Question

I'm trying to update value in the title when user clicks off my page/tab to notify about new messages and when he comes back to the tab to reset that value back to 0. For some reason the value is always incremented no matter what even though I'm setting it to 0 when user makes the tab active again, even though the rest of that function was executed properly changing document.title back to 'Chat'.

$(document).ready(function(){
  var unreadMessages = 0;
  var ws = new WebSocket("ws://localhost:8080/ws");
  ws.addEventListener("message", function(e){
    createMessage(e.data);
    unreadMessages = updateNotification(unreadMessages);

  });
});

function updateNotification(unreadMessages){
  unreadMessages++;
  $(window).blur(function(){
    if(unreadMessages>0){
      document.title = "("+ unreadMessages + ") Chat";
    }
  });
  $(window).focus(function(){
    unreadMessages=0;
    document.title = 'Chat';
  });
  return unreadMessages;
}

Answer 1

Your whole structure is wrong and can't work like that. Like @mpf82 commented don't set new eventhandlers everytime you receive a message. Try something like this:

$(document).ready(function(){
  var unreadMessages = 0;
  var blurred = false;
  var ws = new WebSocket("ws://localhost:8080/ws");
  ws.addEventListener("message", function(e){
    createMessage(e.data);
    if(blurred) document.title = "("+ ++unreadMessages + ") Chat";
  });
  $(window).blur(function(){
    blurred = true;
  });
  $(window).focus(function(){
    document.title = 'Chat';
    blurred = false;
    unreadMessages = 0;
  });
});