javascript - 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>