Question:
Next, my problem is like this, I'm making an inbox, with that I need to have the messages updated every 5s. So far so good. In the div that loads the messages I put the following 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)
}
There where I'm printing the user_id is the user I'm talking to. so it loads chat every 5s on my div. see you ok. however, if I click on another window that loads another chat in that same div, the old script keeps running and a new one also starts, making the two conversations appear quickly and it keeps changing, if I click on more it doesn't stop the script and continues running several.
How can I make it when I click on another chat to stop running with this old user_id and just run a script with the new one?
First page that the user chooses which inbox he wants to open
<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 for this page:
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) }
Now the page that loads:
<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>
This page that is loaded that needs to be reloaded receiving as GET the one from
Answer:
The problem is that every click you make opens a new chat window and starts an ajax loop. If you click on people you will get 3 requests running, all changing the content of the same div which is common.
I suggest having in JavaScript something always running (in the example it is the function loader() { ), and at each new chat window change only the ID that is searched.
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
});
}