Geek Answers Handbook

How to constantly check for a new message using setInterval without constantly notifying the user?

I have a jQuery AJAX function where I check for new messages, and if there are any, I show the user that they have a new message. My getNewMessage(); function getNewMessage(); , which now works great on page refresh, because everything happens once. However, when I put it in setInterval("getNewMessage()", 20000) , I get an infinite loop of notifications. This is understandable, but how can I stop him from notifying the user every time, but at the same time keep checking for new messages?

This is my getMessage function, sorry for the big function:

 function getNewMessage() { /** Retrieve new messages **/ $.post('', { newMessage : true}, function(data) { data = $.parseJSON(data); /** If new messages exist then display notification and popup **/ if(data) { var newMessageDialog = $('#newMessageDialog'); /** Create popup dialog options **/ newMessageDialog.dialog( { autoOpen: false, modal: true, minWidth: '100', width: '800', hide: 'fold', show: 'drop', title: "New Messages", close: function() { hideAllNotifications(); } }); /** Initialise variables **/ var html = ''; var length = 0; var total = 0; /** For each message we create the html for the message and insert into dialog **/ $.each(data, function(name, messages) { length = messages.length; total += length; /** For grammatical reasons. If length > 1 then "message" is plural**/ grammar = (length > 1) ? "messages" : "message"; /** Reverse the messages so the latest message appears at top and earliest message at bottom **/ messages.reverse(); var msgs = ''; for(var i in messages) { msgs += '<p>' + messages[i]['date'] + ': ' + messages[i]['message'] + '</p>'; } html += '<a href="uid[' + messages[i]['uid'] + ']" class="popUpLink">' + name + ': ' + length + ' new ' + grammar + '</a>'; html += '<div class="popUpDialog" id="viewNewMessageDialog" title="New messages from ' + name + '"><div class="flexi_box"><h3 class="hubHeader">' + name + '</h3>' + msgs + '</div></div>'; html += '</br>'; }); /** Insert Content **/ $('.flexi_box h3', newMessageDialog).after(html); /** Bind dialog to popuplinks **/ popUpDialogs(); /** Bind click event * If clicked then we assume message has been read so we delete from messages table **/ $('a.popUpLink', newMessageDialog).on('click', function() { /** Get userid from href **/ var uid = $(this).attr('href'); var start = uid.indexOf('['); var end = uid.indexOf(']'); uid = uid.slice(start + 1, end); removeReadMessages(uid); }); var grammar2 = (total > 1) ? 'messages': 'message' var notifier = showNotification('info', '<h3>You have ' + total + ' new ' + grammar2 + '. Click here to view new ' + grammar2 + '</h3>'); /** Open dialog on click **/ $('.info').on('click', function() { /** Trigger Dialog **/ $('#newMessageDialog').dialog('open').css('maxHeight', $(window).height()-90); }); return true; } });//end post }
0
source share
3 answers

Instead of calling setInterval you should call setTimeout to run the function once.
Then in the AJAX callback, if you didn’t receive the message, call setTimeout again.

+3
source

Detection if you receive a new message that is different from the previous one. Only if there is a new message, display a dialog.

0
source

Create a global variable - an array - and whenever you show a notification, store messages[i]['uid'] in it. Then, when you check again, exclude everything that is already in your array.

0
source

More articles:


All Articles