fonction setInterval

Keller
Javascript

Bonjour,

j'ai un petit soucis lors de l'utilisation de la fonction "setInterval"
je fais appel à cette fonction pour recupérer un contenu de ma base de donnée en php et le réafficher sur ma page principale pour le mettre à jour chaque 1s, une utilisation classique en somme.
Hors, toutes les secondes cela vide & rempli ma div, forcément, avec le contenu et crée une sorte de clignotement. L'oeil nu voit l'empty() / append() se faire. Je trouve cela génant.
Je me demandais donc s'il y avait une solution pour y remédier.. 

function GetHeaderDisplayer(mid){
    $('#header_display').empty()
    $.get('pages/DisplayMatch.Headers.php', { mid: mid }, function(data){
            $('#header_display').append(data);
    });
}
setInterval(function() {
    GetHeaderDisplayer(mid);
}, 1000);

Je fais appel à la fonction "empty()" mais j'ai également fait avec "hide()" qui lance la fonction get, mais j'ai le même résultat..

Merci par avance !

Edit : J'en suis à me demander, la solution vriendrait-elle en recupérer les variables de la page DisplayMatch.Headers.php et de les afficher plutot que de récupérer un bête echo de cette page ?

6 réponses

Keller
Auteur
Réponse acceptée

Re,
j'avais essayé aussi le html mais sans succès :(

J'ai résolu mon soucis en passant par l'ajax / json
Je récupère donc mon contenu de la table et l'encode en json, et j'affiche le html après, et ça fonctionne niquel :)

Pour ceux que ça intéresse, j'ai suivit cet exemple : http://labs.jonsuh.com/jquery-ajax-php-json/
Merci à vous deux, Lartak & SLK pour avoir essayé de m'aider ;)

Lartak

Bonjour.
J'ai un peu de mal à comprendre ton système.
Quand tu dis que tu récupères du contenu de ta base de données, s'agit-il de plusieurs enregistrements ou d'un seul (je suppose que ce sont plusieurs) ?
Au lieu de vider systématiquement le contenu correspondant de ta page, pourquoi ne pas d'abord vérifier si le contenu diffère avant ?
Comme par exemple, récupérer l'ID du dernier enregistrement affiché sur la page et lors de la requête SQL, demander les enregistrements suivants et dans ce cas là deux cas peuvent se produire :

  1. Aucun enregistrement n'est récupéré en base de données, tu le signifie via ton retour et tu ne fais rien de plus côté javascript
  2. Des enregistrements sont retournés, mais au lieu de vider le contenu, tu les ajoutes à la suite (par exemple)

En faisant quelque chose de ce genre, tu éviteras les interactions visuelles auprès de l'utilisateur non indispensables.

Keller
Auteur 
Quand tu dis que tu récupères du contenu de ta base de données,
s'agit-il de plusieurs enregistrements ou d'un seul (je suppose que ce sont plusieurs) ?

C'est simplement un tupled'une table qui est mis à jour donc je récupère ça.
Et même si je n'actualise que si mon contenu change, ça fera quand même ce clignotement puisqu'il y aura cette étape de vider le contenu pour le réafficher.
Je vais tenter de récupérer en json les données de la base et de réafficher via jquery

Lartak

C'est simplement un tupled'une table

Heu... ?

Et même si je n'actualise que si mon contenu change, ça fera quand même ce clignotement puisqu'il y aura cette étape de vider le contenu pour le réafficher.

Tu ne sembles pas avoir saisi tout ce que j'ai dit, surtout qu'avec ton système actuel, tu vides et ré-affiche le contenu toutes les secondes, ce qui ne sera pas le cas avec l'exemple que je t'ai donné vu que tu ne vas quand même pas avoir de mise à jour/ajout toutes les secondes, ce qui sera moins flagrant pour l'utilisateur.

Keller
Auteur

Un tuple = un enregistrement, une ligne d'une table quoi

Si j'ai bien saisi, et c'est pour moi pas pour des utilisateurs.
Et dans ton cas, comme dit, ça refera quand même ce problème, moins flagrant car uniquement lors de la réactualisation de données, mais toujours présent.

SLK

Salut,

Moi aussi j'ai du mal à cerner le truc.

Essaie en modifiant la fonction comme ça pour voir :

function GetHeaderDisplayer(mid){
    $.get('pages/DisplayMatch.Headers.php', { mid: mid }, function(data){
            $('#header_display').html(data);
    });
}

Ou pareil, mais avec un fadeIn() ?

function GetHeaderDisplayer(mid){
    $.get('pages/DisplayMatch.Headers.php', { mid: mid }, function(data){
            $('#header_display').html(data).fadeIn();
    });
}