jQuery：每60秒显示一条消息

Question

A user can add some text to a textarea. Every 60 seconds the text get saved into the database.

I need a message that show "Text is saved" for 3 seconds and hide again. The interval should be 60 seconds. The message should be display above the textarea but only when there is text in the textarea.

I tried:

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

There were quite a few problems, many of them simple typos:

• Your 'txtarea' idea was spelled 'txtara'
• The message ID had a # in it in the HTML
• You never showed the message box after fading it out
• There was nothing to trigger the function running in the first place (it was only ever called by itself).
• your function continually appended the same text onto #message, instead of replacing it

Here's a corrected version (times reduced significantly for demo, otherwise this is similar to your existing code):

 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> 

That's not a very good way to implement of what you're trying to do, though; it'll cause the message to constantly appear and fade again as long as the field contains text. Instead of running on an interval, and constantly saving the same value to the database every minute, consider running on change events. And instead of just checking to see if the field is empty, check to see if its contents have changed (and therefore need saving):

 $('#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

The corrected code is shown below:

HTML:

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

script:

  setInterval(autoSaveEntry, 60000);

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