Maxy.fr

Limiter le nombre de messages d’un chat

Un article portant sur une situation particulière aujourd’hui. Si vous réalisez un système de messagerie instantanée en utilisant JQuery, vous ajoutez surement chaque nouveau messages dans un div particulier. Il va donc arrivé un moment ou le nombre de messages sera trop conséquent ce qui alourdira considérablement votre page.

Voici donc un morceau de code qui vous permettra de limiter le nombre de messages dans votre div :

Dans cet exemple je vais considérer que la balise contenant vos messages est la suivante :

<div id="messages">
    <div class="message">Message 1</div>
    <div class="message">Message 2</div>
</div>

Voici donc le code JQuery à appelé lors de l’ajout de chaque nouveau message qui vous permettra d’effacer automatiquement les premiers messages si le nombre total de message dépasse un certain nombre (ici 50) :

$("#messages").find(".message").slice(0,-50).remove();

L’id #messages correspond au conteneur de l’ensemble des messages. La classe .message correspond quant à elle au conteneur d’un message. À noté que les messages sont effacé à partir du haut (dans l’exemple le "message 1" sera effacé en premier).

Catégories : Javascript

Par Guillaume le 01/11/2013 à 21:57

Partager l'article :

Articles similaires

Ajouter facilement un double-curseur à vos formulaires HTML

Lors de la conception de formulaires HTML on se retrouve assez vite limité par les éléments proposés de base. C'est par exemple le cas si on utilise les curseurs avec le code <input type="range">, ceux-ci ne permettent l'utilisation que d'un seul curseur par...

Récupérer les paramètres GET d'une URL avec React.JS

Quoi de plus basique que de récupérer les données fournies en GET dans l'URL d'un site internet, enfin en théorie seulement parce qu'avec React.JS c'est un poil plus compliqué. Heureusement voici une solution qui va vous permettre de...

Eviter les ralentissements d'un compteur Javascript sur un onglet non actif

Si vous essayez de faire un compteur qui s'incrémente toutes les secondes en Javascript, vous remarquerez que tout fonctionne correctement lorsque vous êtes sur l'onglet en question, mais que celui-ci subira des ralentissements lorsque l'onglet n'est pas actif. Vous avez donc une...