Angularjs chat with strange polling - angularjs

Question

I created a simple chat with the frontend in angularjs. It has on the left size a simple index, of all the conversations that user has, with a show(chat_id) action, that opens up on the right side the chat itself, using polling to fetch new messages.
The main piece of the controller that does the functionality described:
$scope.show = function(id) {
$scope.chat = [];
$scope.currentConversation = id;
var poll = function(){
conversation.get(id).then( function( conversation ) {
$scope.chat = conversation.data.messages;
$scope.form = true;
$timeout(function() {poll()}, 5000)
});
}
poll();
}
My problem, is whenever I click on two different conversations quickly, say show(1) and show(2) I get a weird behavior where it switches from conversation 1 to 2, back and forth, with the polling action.
Here is the get requests angular is making.
and for contextualization, here's the chat simple UI

Answer 1

As I said in the comment, every time show() is called, you start a new recursive loop that polls the conversation with the given id every 5 seconds.
So, if you click 4 conversations (1, 2, 3 and 4), you will end up with a refresh of conversation 1 every 5 seconds, another refresh of conversation 2 every 5 seconds, etc.
That's not what you want. Once you show a conversation, you only want to refresh that conversation, not the other ones.
So you could use that following code that cancels the previous timeout every time show() is called, and that verifies that the displayed conversation ID is the right one when getting a response:
var timer;
$scope.show = function(id) {
$scope.chat = [];
$scope.currentConversation = id;
if (timer) {
$timeout.cancel(timer);
}
var poll = function(){
conversation.get(id).then( function( conversation ) {
if ($scope.currentConversation == id) {
$scope.chat = conversation.data.messages;
$scope.form = true;
timer = $timeout(function() {poll()}, 5000);
}
});
}
poll();
}

Answer 2

You probably want to do a check inside your inner function to make sure that $scope.currentConversation === id. That'll prevent it from losing context. My guess is that it's a race condition that you're clicking before the first
conversation.get(id) comes back.
$scope.show = function(id) {
$scope.chat = [];
$scope.currentConversation = id;
var poll = function(){
conversation.get(id).then( function( conversation ) {
if ($scope.currentConversation !== id) return; // Prevent the race condition
$scope.chat = conversation.data.messages;
$scope.form = true;
$timeout(function() {poll()}, 5000)
});
}
poll();
}