jquery - setTimeout() and remove() doesn't work as expected

Question

I have this function:

function flash(msg) {
  var _id = $('#flash_notice__');
  if( _id.length > 0 ) {
   _id.html(msg); 
  } else {
    $('<div id="flash_notice__">'+ msg +'</div>').appendTo('body');
    //$('body').append('<div id="flash_notice__">'+ msg +'</div>');
  }
  setTimeout(function(){
    _id.fadeOut(500, function(){
      $(this).remove(); //or _id.remove();
    });
  }, 2500);
}

First time (on refresh) the message (msg) remain on page, then when flash() run again, works good. I think, when _id exist .remove() it's working, but when is create the the message it's still on screen. What I'm doing wrong? Thanks.

Answer 1

你基本上已经回答了你自己的问题：

我认为，当 _id 存在时 .remove() 它正在工作，但是当创建消息时它仍然在屏幕上

如果您查看代码，则该变量_id仅在消息已经出现在屏幕上时才存在。在您创建它的情况下，该变量不指向任何内容：

var _id = $('#flash_notice__');
...
} else {
  $('<div id="flash_notice__">'+ msg +'</div>').appendTo('body');
}

将您的代码更改为：

function flash(msg) {
  var _id = $('#flash_notice__');
  if( _id.length > 0 ) {
   _id.html(msg); 
  } else {
    _id = $('<div id="flash_notice__">'+ msg +'</div>').appendTo('body');
  }
  setTimeout(function(){
    _id.fadeOut(500, function(){
      $(this).remove(); //or _id.remove();
    });
  }, 2500);
}

页面上已有元素的示例：http: //jsfiddle.net/GyUhB/
页面上没有元素的示例：http: //jsfiddle.net/GyUhB/1/

Answer 2

尝试 ：

function flash(msg) {
  var _id = $('#flash_notice__');
  if( !_id.length ) {
    _id = $('<div id="flash_notice__">'+ msg +'</div>').appendTo('body');
  } else {
   _id.html(msg).show();
  }
  setTimeout(function(){
    _id.fadeOut(500, function(){
      $(this).hide();
    });
  }, 2500);
}

注意：.hide()不是.remove()，所以 _flash_notice 可以在下一轮重复使用。否则每次都会创建一个新的 _flash_notice。