jQuery contenu du fichier txt afficher/masquer

Question

J'ai un script qui charge les informations à partir d'un fichier texte et recharger le fichier toutes les x secondes afin que chaque fois que le fichier texte sera mis à jour sera visible.

Mais est-il possible d'afficher les div x secondes, puis il sera caché. Et lorsque le fichier texte change de contenu, il réapparaît pendant quelques secondes, puis il se cache à nouveau et ainsi de suite?

Ce que j'ai maintenant:

function readTxtfile() { 
     jQuery.ajax({ 
     url: "textfile.txt", 
     dataType: "text", 
     success: function(data) { 
     var lines = data.split(','), 
      htmlLines = '<p>' + lines.join('</p><p>') + '</p>'; 

     jQuery("#info_container .txt").html(htmlLines); 
     setTimeout(readTxtfile, 5000); 
     } 
    }); 
} 

jQuery(document).ready(function() { 
    readTxtfile(); 
}); 

Answer 1

Il y a toujours l'approche directe avec .show() et .hide()

function readTxtfile() { 
     jQuery.ajax({ 
     url: "textfile.txt", 
     dataType: "text", 
     success: function(data) { 
     var lines = data.split(','), 
      htmlLines = '<p>' + lines.join('</p><p>') + '</p>'; 

     var element = jQuery("#info_container .txt") 
     if (htmlLines == element.html()) { 
      element.hide(); 
     } else { 
      element.html(htmlLines).show(); 
     } 
     setTimeout(readTxtfile, 5000); 
    }); 
} 

Answer 2

Je vous suggère d'utiliser setInterval au lieu de setTimeout puisque vous exécutez votre demande tous les X ms. C'est quelque chose que vous pourriez faire:

var TIME_TO_SHOW = 2000; 
 
var TIME_FOR_REQUEST = 1000; 
 
var currentContent = null; 
 
var hideTimeout = null; 
 
    
 
function readTxtfile() { 
 
    var data = $("#inputtxt").val(); 
 
    
 
    if(currentContent === data) { 
 
    //if content read is the same as actual content, do nothing 
 
    return; 
 
    } 
 
    currentContent = data; 
 

 
    var lines = data.split(','); 
 
    htmlLines = '<p>' + lines.join('</p><p>') + '</p>'; 
 

 
    $("#info_container .txt").html(htmlLines); 
 
    $("#info_container .txt").show(); //show div on text edited 
 
    if(hideTimeout) { 
 
    //this will prevent the div to get hidden by a timeout which 
 
    //has been started before 
 
    clearTimeout(hideTimeout); 
 
    } 
 
    hideTimeout = setTimeout(function() { 
 
    $("#info_container .txt").hide(); 
 
    hideTimeout = null; 
 
    }, TIME_TO_SHOW);//Hide the the div after 2 seconds 
 
} 
 

 
$(document).ready(function() { 
 
    //check for modifications every second 
 
    var interval = setInterval(readTxtfile, TIME_FOR_REQUEST); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input id="inputtxt" type="text" name="test" value="Edit me"></input> 
 

 
<div id="info_container"> 
 
    <div class="txt" style="display: none;">Test</div> 
 
</div>

Si pour une raison quelconque, vous devez cesser de demander le fichier que vous pouvez utiliser dans ce cas: clearInterval(interval)

EDIT J'ai ajouté un extrait de code dans lequel j'utilise un texte d'entrée, vous pouvez utiliser la même approche avec votre demande ajax