Get data from server without refresh

0

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

Whentheuserclicksononeofhis/herfriendsinthelistthedataofhis/herID&NOMEaresenttoaopenWidChat(de,para,nome)functionthatreceivestheIDofthelogged-inuser,IDoftheuserclickedonthelistandthenameoftheother.

Thedatagoesstraighttothisscript:

functionopenWidChat(de,para,nome){varurl_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, however have to be refreshing from time to time to stay in real time with the messages that will receive.

The fact is that I can do this and 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 in the list, I believe , that setInterval is like storing setInterval previous and keeps going back and forth between a user's chats and another and clicking on another increases the back and forth and adds the conversation of the third.

I've tried using clearInterval , but it did not work, or I could not get it to 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.

    
asked by anonymous 10.07.2015 / 02:48

1 answer

0

You only need to save setInterval to a global variable. Soon after, well before your setInterval function, you reset its range 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 (w / 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');
    });
});
    
10.07.2015 / 09:01