Buen día,
Estoy programando un chat, el cual mando a actualizar los mensajes cada X segundos, uso una funcion ajax que me trae los datos y luego ejecuto un setInterval para que se ejecute varias veces.
El problema se da al cliquear un chat, y luego otro, la funcion setInterval anterior se mescla con la nueva y comienza un bucle y se muestra un chat y luego el otro y el otro... y asi se van alternando
Paso a explicar mas detalladamente:
Tengo el siguiente chat basado en HTML, CSS y Js.
En la parte donde dice Usuario 1 y Usuario 2, estan enlistado en un foreach desde la base de datos, muestro el nombre, el avatar y el estado online.(esto es indiferente ya que solo muestro datos)
<div class="row sideBar">
<?php
if(isset({ch[0][0]}) && {ch[0][0]}!=null){
foreach({ch} as $chat){
?>
<div class="row sideBar-body" onclick="Chatear('<?php echo $chat[0];?>');"> <!-- onclick con ID del chat -->
<div class="col-sm-3 col-xs-3 sideBar-avatar">
<div class="avatar-icon">
<img src="../_lib/assets/img/<?php echo $chat[2];?>">
</div>
</div>
<div class="col-sm-9 col-xs-9 sideBar-main">
<div class="row">
<div class="col-sm-8 col-xs-8 sideBar-name">
<span class="name-meta"><?php echo $chat[1];?></span>
</div>
<div class="col-sm-4 col-xs-4 pull-right sideBar-time">
<span class="time-meta pull-right"><i class="fas fa-circle <?php if($chat[3]==1){ ?> text-success <?php }else{ ?> text-danger <?php } ?>"></i></span>
</div>
</div>
</div>
</div>
<?php
}
}
?>
</div>
Lo importante de esto es que al momento de enlistar estos usuarios, agrego una funcion onclick con el ID del chat:
onclick="Chatear('<?php echo $chat[0];?>');"
En esta funcion JavaScript Chatear esta el problema:
function Chatear(recive_id){
var parametros = {
"recive_id" : recive_id //recibo el ID del chat
};
$.ajax({ //proceso ajax donde envio el ID para hacer una consulta PHP
data: parametros,
url: '../ChatController/index.php',
type: 'post',
beforeSend: function () {
},
success: function (response){
$("#chatear").html(response); //esta funcion devuelve codigo html con el historial del chat
$('#conversation').scrollTop( $('#conversation').prop('scrollHeight')); //bajo el scroll del chat al final
//Borrar(); ya hablare de esta funcion mas adelante.
ReloadChat(recive_id); //aqui llamo a la función recargar el chat
}
});
}
//funcion recargar chat, lo que hago es el setInterval cada 2 segundos para que se actualicen los mensajes entrantes o salientes.
function ReloadChat(id){
setInterval(function(){
Chatear(id);
},2000);
}
Si doy clic en Usuario 1 funciona sin problemas, pero si doy clic en usuario 1 y luego en usuario 2, comienza el bucle y el aplicativo muestra los mensajes del usuario 2 y luego del usuario 1 y asi sucesivamente de manera infinita. (Entiendo que esto pasa porque hay varios setInterval ejecutandose al mismo tiempo)
Lo que trate de hacer es eliminar todos los setInterval con la funcion Borrar(); que estaba comentada:
function Borrar(){
var ints = [];
$("#chatear").each(function() {
ints.Push( setInterval(function() {
}, 1000)
);
});
for( var i = 0; i < ints.length; ++i ){
clearInterval( ints[i] );
}
ints = [];
}
pero esta funcion me elimina todos los procesos y los mensajes no se actualizan.
¿Como puedo eliminar los proceso setInterval sin que se elimine el ultimo o en su defecto indicarme alguna otra manera de hacer un reload cuando lleguen mensajes nuevos al chat?