Question

我有一个脚本可以从文本文件中加载信息，并且每隔x秒重新加载一次文件，因此每次更新文本文件时都会显示。

但是可以显示div x秒然后它将被隐藏。当文本文件更改内容时，它会再次弹出几秒钟，然后它会再次隐藏，等等？

我现在拥有的：

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

我建议您使用setInterval而不是setTimeout，因为您每隔X ms运行一次请求。这是你可以做的事情：

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>

如果由于某种原因你必须停止请求你可以在这种情况下使用的文件：clearInterval(interval)

修改我添加了一个代码片段，其中我使用了输入文本，您可以使用与ajax请求相同的方法

Answer 2

始终采用.show()和.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);
    });
}

jQuery txt文件内容显示/隐藏

2 个答案: