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