jQuery：每60秒显示一条消息

Question

用户可以向文本区域添加一些文本。 每60秒钟将文本保存到数据库中。

我需要一条消息，显示“文本已保存” 3秒钟，然后再次隐藏。 间隔应为60秒。 该消息应显示在文本区域上方，但仅当文本区域中有文本时才显示。

我试过了：

function autoSaveEntry() {
  if($('#txtarea').val().length>0){
    $('#message').append('Text is saved');
    setTimeout(function () {
      $('#message').fadeOut(function(){});
    }, 3000);
  }
  setTimeout(autoSaveEntry, 60000)
}

的HTML

<div id="#message"></div>
<textarea id="txtara"></textarea>

Answer 1

存在很多问题，其中许多是简单的错字：

• 您的“ txtarea”想法被拼写为“ txtara”
• 消息ID在HTML中带有＃
• 淡出后从未显示过消息框
• 没有什么可以触发该函数首先运行的（它只能被自己调用）。
• 您的函数不断将相同的文本附加到#message上，而不是替换它

这是一个更正的版本（演示时间大大减少，否则与您现有的代码相似）：

 function autoSaveEntry() { console.log($('#txtarea').val()) if ($('#txtarea').val().length > 0) { $('#message').text('Text is saved').show(); setTimeout(function() { $('#message').fadeOut(); }, 1000); } } setInterval(autoSaveEntry, 5000); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="message"></div> <textarea id="txtarea"></textarea> 

不过，这不是实现您要尝试执行的操作的好方法； 只要该字段包含文本，它就会导致该消息不断出现并再次消失。 可以考虑在变更事件上运行，而不必间隔一定时间运行，并且每分钟不断地将相同的值保存到数据库中。 并且不只是检查该字段是否为空，而是检查其内容是否已更改（因此需要保存）：

 $('#txtarea').on('change', function() { if ($(this).val() !== $(this).data("lastval")) { // here you would save the data, and ideally wrap the following code in a promise resolve from that ajax call. $('#message').show(); setTimeout(function() { $('#message').fadeOut(); }, 1000); } $(this).data("lastval",$(this).val()); // stash the current value for next time }); 

 #message { display: none } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="message">Text is saved</div> <textarea id="txtarea"></textarea> 

Answer 2

更正后的代码如下所示：

HTML：

<div id="message"></div>
<textarea id="txtarea"></textarea>

脚本：

  setInterval(autoSaveEntry, 60000);

function autoSaveEntry() {
  if($('#txtarea').val().length>0){
    $('#message').append('<label>Text is saved</label>');
      setTimeout(function () {
      $('#message').fadeOut(function(){});
    }, 3000);
  }
}