jQuery txt Datei Inhalt zeigen/verbergen

Question

Ich habe ein Skript, das Informationen aus einer Textdatei lädt und die Datei alle x Sekunden neu lädt, so dass jedes Mal, wenn die Textdatei aktualisiert wird, sichtbar sein wird.

Aber ist es möglich, die div x Sekunden zu zeigen und dann wird es versteckt werden. Und wenn die Textdatei den Inhalt ändert, wird sie für einige Sekunden erneut eingeblendet und dann wird sie sich wieder verstecken und so weiter?

Was ich jetzt:

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

Es gibt immer die direkte Annäherung mit .show() und .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

Ich schlage vor, Sie setInterval statt SetTimeout zu verwenden, da Sie Ihre Anfrage laufen alle X ms. Das ist etwas, was man tun könnte:

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>

Wenn Sie aus irgendeinem Grund anhalten müssen, um die Datei anfordert Sie in diesem Fall benutzen könnte: clearInterval(interval)

EDIT Ich habe hinzugefügt ein Code-Snippet, in dem ich einen Eingabetext verwende, könnten Sie den gleichen Ansatz mit Ihrer Ajax-Anfrage verwenden