Retrieve server data without refresh

Question

I have a script with a list of friends users and next to a box chat.

When the user clicks on one of his friends in the list his data ID & NOME are sent to a function openWidChat(de,para,nome) who receives the ID of the logged-in user, ID of the user clicked on the list and the name of the other.

The data goes straight to this script:

function openWidChat(de,para,nome) {
        var url_s = $("#url_s").val();
        $("label#boxC input").val('');
        $("label#boxC input").attr('user-de',de);
        $("label#boxC input").attr('user-para',para);

        $("._5chat").attr('id','chat_'+para);
        $("#m_form-header div.load4Box").fadeIn(400).html('<div class="maxWid_16"><img src="'+ url_s +'/themes/4space/images/load/loadLikesW.gif" alt="" width="16" height="16"></div>');
            $.ajax({
                url: url_s +"/demo/chat/chat.php",
                data:'de='+de+'&para='+para+'&url_s='+url_s,
                type: "POST",
                cache: false,
                success : function(html){
                    $("label#boxC ").removeClass("bord-b_in");
                    $("#m_form-header div.nameUserBox").html(nome);
                    $("label#boxC input").removeAttr('disabled');
                    $("label#boxC input").attr("placeholder", "Escreva uma mensagem...");

                    $("#m_form-header div.load4Box").html('<a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="glyphicon glyphicon-cog"></i></a><ul class="menDroo-clear dropdown-menu" aria-labelledby="dLabel">Limpar converça</ul>');
                    $("#mensChat div#chat_"+para).html(html);
                    $("._5chat").scrollTop($("._5chat")[0].scrollHeight);
                }
        });
}

And after receiving the data in the box load the messages exchanged between users, but have to keep refreshing time in time to stay in real time with the messages you will receive.

The fact is that I can do this and give the refresh through ajax and setInterval:

function setLoop(de,para,nome) {
   var url_s = $("#url_s").val();
   $("._5chat").attr('id','chat_'+para);
   setInterval(function() {
       $("#mensChat div#chat_"+para).load(url_s+"/demo/chat/test.php?="+de+"&p="+para+"&url_s="+url_s);
   }, 1000);
}

But when I click on another user from the list, I believe, that the setInterval is as if storing the setInterval and keeps going back and forth between the chats of one user and another and if you click on another increases the back and forth and adds the conversation of the third.

I’ve tried using the clearInterval, but it didn’t work, or I couldn’t make it work properly.

What I need is for him to receive the conversation at a time and cancel the previous conversation after clicking on another friend.

Answer 1

You just need to save the setInterval a global variable. Right after, well before its function setInterval, you reset your interval with clearInterval(variavel_global);. Finally, overwrite the global variable with the new setInterval.

If you’re confused, take a look below.

Normal version with global variable (s/ problem)

JSFIDDLE

var loop = setInterval;

function setLoop(de, para, nome) {
   //var url_s = $("#url_s").val();
   //$("._5chat").attr('id','chat_'+para);

   clearInterval(loop);
   loop = setInterval(function() {
       //$("#mensChat div#chat_"+para).load(url_s+"/demo/chat/test.php?="+de+"&p="+para+"&url_s="+url_s);
       console.log('mensagem: de => '+de+' | para '+para+' | nome => '+nome+'');
   }, 1000);
}

$(document).ready(function()
{
    $('.usuario').click(function() {
        setLoop('de', 'para #id' + $(this).attr('id'), 'nome');
    });
});

Version without global variable (c/ problem)

JSFIDDLE

function setLoop(de, para, nome) {
   //var url_s = $("#url_s").val();
   //$("._5chat").attr('id','chat_'+para);

   setInterval(function() {
       //$("#mensChat div#chat_"+para).load(url_s+"/demo/chat/test.php?="+de+"&p="+para+"&url_s="+url_s);
       console.log('mensagem: de => '+de+' | para '+para+' | nome => '+nome+'');
   }, 1000);
}

$(document).ready(function()
{
    $('.usuario').click(function() {
        setLoop('de', 'para #id' + $(this).attr('id'), 'nome');
    });
});