Question

用户可以在textarea中添加一些文本。每60秒将文本保存到数据库中。

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

我试过了：

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);
  }
}

jQuery：每隔60秒显示一条消息

2 个答案: