3

Seguinte, meu problema é assim, estou fazendo um inbox, com isso preciso mandar atualizar a cada 5s as mensagens. Até ai tudo certo. Na div que carrega as mensagens eu coloquei o seguinte script:

function loadInbox1(id) {
 $("#load-inbox-1").html("<i class='fa fa-spin fa-cog'></i>");

 var timeout;
 clearInterval(timeout);

 setTimeout(function(){
      $('#load-inbox-1').load("/inbox-prof-load.php?from="+id);

        var timeout = setInterval(reloadChat, 5000);    
        function reloadChat () {
             $('#inbox-prof-load-msg').load('inbox-prof-load-msg.php?from='+id);
        }
 }, 500)

}

Ali onde eu estou imprimindo o user_id é o usuario que estou conversando. entao ele carrega o chat a cada 5s na minha div. ate ai ta tranquilo. porem se eu clico em outra janela que carrega nesse mesmo div outro chat, o script antigo nao para de rodar e um novo tambem começa, fazendo com que fique aparecendo as duas conversas rapidamente e fica trocando, se eu for clicando em mais ele nao para o script e continua rodando varios.

Como posso fazer pra quando clicar em outro chat parar de rodar com esse user_id antigo e rodar apenas um script com o novo?


Primeira pagina que o usuario escolhe qual inbox ele quer abrir

<div class="panel panel-default">
<div class="panel-heading">
    <h4 class="panel-title">
    Mensagens dos meus alunos
    </h4>
</div>

        <div class="panel-column panel-inbox no-margin">
            <div class="row no-margin">
                <div class="col-md-5 col-sm-3 col-xs-2 panel-sidebar">
                    <ul class="media-list no-margin" id="inbox-prof-alunos">

                        <?php do { ?>
                        <li class="media <?php if ($row_inbox['inbox_new'] != 0) { echo "active"; } ?>" href="javascript:func()" onclick="loadInbox1('<?=$row_inbox['user_id']?>')">
                            <div class="col-md-11 col-sm-11 no-padding">
                                <div class="media-left">
                                    <img class="media-object img-circle" src="/images/user/avatar/<?=utf8_encode($row_inbox['user_avatar'])?>" alt="Weeazy - <?=utf8_encode($row_inbox['user_nome'])?> <?=utf8_encode($row_inbox['user_sobre_nome'])?>">
                                </div>
                                <div class="media-body hidden-xs">
                                    <h4 class="media-heading"><?=utf8_encode($row_inbox['user_nome'])?> <?=utf8_encode($row_inbox['user_sobre_nome'])?></h4>
                                    <p class="inbox-preview"><?=substr(utf8_encode($row_inbox['user_inbox_msg']), 0, 35)?><?php if (strlen($row_inbox['user_inbox_msg']) > 35) { echo "..."; } ?></p>
                                </div>
                            </div>
                        </li>
                        <?php } while($row_inbox = mysql_fetch_assoc($Busca_inbox)); ?>

                    </ul>
                </div>

                <div class="col-md-7 col-md-offset-5 col-sm-9 col-sm-offset-3 col-xs-offset-2 panel-content">
                    <div class="inner" id="load-inbox-1">

                        <div class="media-header">
                            <div class="row">
                                <div class="col-md-12 media-header-meta">
                                    <span class="text-title"><i class="fa fa-comments"></i> Clique em uma conversa para expandir</span> 
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>


</div>

Script desta pagina:

function loadInbox1(id) {
 $("#load-inbox-1").html("<i class='fa fa-spin fa-cog'></i>");

 var timeout;
 clearInterval(timeout);

 setTimeout(function(){
      $('#load-inbox-1').load("/inbox-prof-load.php?from="+id);

        var timeout = setInterval(reloadChat, 5000);    
        function reloadChat () {
             $('#inbox-prof-load-msg').load('inbox-prof-load-msg.php?from='+id);
        } }, 500) }

Agora a pagina que é carregada:

                            <div class="media-header">
                            <div class="row">
                                <div class="col-md-8 col-sm-9 col-xs-9 media-header-meta">
                                    <span class="text-title">Conversa com</span> 
                                    <ul class="list-inline no-margin">
                                        <li>
                                            <h4>
                                                <a href="/profile/aluno/<?=$row_inbox['user_url']?>"><?=$row_inbox['user_nome']?> <?=$row_inbox['user_sobre_nome']?></a>
                                            </h4>
                                        </li>
                                    </ul>
                                </div>

                            </div>
                        </div>
                        <div class="message-body">

                            <div id="inbox-prof-load-msg" class="message-content row nice-scroll">

                                <?php do { ?>

                                <div class="col-md-10" <?php if ($row_inbox['user_inbox_from'] == $user_id) { echo 'style="float:right;"'; } ?>>
                                    <span class="message-box message-<?php if ($row_inbox['user_inbox_from'] == $user_id) { echo 'mine'; } else { echo 'other'; }?>" data-toggle="tooltip" data-placement="<?php if ($row_inbox['user_inbox_from'] == $user_id) { echo 'left'; } else { echo 'right'; }?>" title="<?=date('H:i', strtotime($row_inbox['user_inbox_date']))?>">
                                    <?=nl2br(utf8_encode($row_inbox['user_inbox_msg']))?>
                                    </span>
                                </div>

                                <?php } while ($row_inbox = mysql_fetch_assoc($Busca_inbox)); ?>

                            </div>



                            <div id="reply" class="reply">
                                <form class="text-right" id="profile-add-inbox">
                                    <textarea class="form-control" name="msg" placeholder="Escreva sua mensagem aqui" style="height:80px;border-bottom: 1px solid #ddd;"></textarea> 
                                    <input type="hidden" name="to" value="<?=$other_id?>">
                                    <input type="hidden" name="aluno" value="<?=$other_id?>">

                                    <button type="submit" class="btn btn-warning">Enviar</button>
                                </form>
                            </div>
                        </div>

Esta pagina que é carregada que precisa ser recarregada recebendo como GET aquele from

1 Resposta 1

2

O problema é que a cada clique que fazes abres uma nova janela de chat e inicias um loop de ajax. Se clicares em pessoas vais ter 3 pedidos a correr, todos a mudarem o conteúdo da mesma div que é comum.

Sugiro teres no JavaScript algo sempre a correr (no exemplo é a function loader() {), e a cada nova janela de chat mudar somente o ID que é procurado.

 var pooler = (function() {
     var running = false;
     function loader() {
         if (!window.chatID) return;
         running = true;
         $('#inbox-prof-load-msg').load('inbox-prof-load-msg.php?from=' + window.chatID, function() {
             setTimeout(loader, 5000); // quando tiver carregado, pedir novo conteudo dentro de 5 segundos
         });
     }
     return function() {
         if (!running) loader(); // impedir multiplas execuções ao mesmo tempo
     }
 })();

 function loadInbox1(id) {
     window.chatID = id; // para saber qual a janela/chat aberta
     $("#load-inbox-1").html("<i class='fa fa-spin fa-cog'></i>");
     $('#load-inbox-1').load("/inbox-prof-load.php?from=" + id, function(){
        $('#inbox-prof-load-msg').html(''); // limpar a janela
        pooler(); // chamar o pooler
     });
 }
2
  • 1
    Não sei qual foi a mágica feita (rsrs) mas agora funcionou! Estou realmente muito agradecido pela ajuda e pela atenção!
    – Leonardo
    Commented 16/12/2015 às 21:16
  • @LeonardoCarmo juntei explicações na resposta.
    – Sergio
    Commented 16/12/2015 às 21:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .