Question

以下是JavaScript文件：

var ToastBtnClicks = 0;
function ShowToast(ToastText){
  ToastBtnClicks++;
  $('#ToastContainer').append("<div class='ToastContainerChild' id='ToastContainerChild"+ ToastBtnClicks +"'>"+ToastText+"</div><br>");
  //document.getElementById("ToastContainer").className = "show";
  setTimeout(function(){ $("#ToastContainerChild"+ToastBtnClicks).remove(); }, 2000);
}

每当调用ShowToast函数时，都会将新的div元素附加到元素#ToastContainer。这个过程非常有效。此外，在调用该函数2秒后，使用setTimeOut方法删除该新元素。我面临的问题是，如果我们多次调用该函数（不等待其余部分被删除），并且在几秒钟之后如果我们停止连续调用该函数，则仅删除最后添加的元素（2秒后））。为什么？我希望该函数从网页中删除每个被添加的元素，在创建（或附加）之后的2秒内删除。我该怎么做？抱歉我的英语不好，如果是......

Answer 1

创建一个局部变量来引用用于创建的元素的索引，以便确定删除正确的索引。这是必需的，因为您的计数器是共享的，因此如果您在两秒钟内单击，则计时器将引用递增的值而不是原始值。

var ToastBtnClicks = 0;

function ShowToast(ToastText){
  var x = ++ToastBtnClicks; // Notice the prefix ++

  $('#ToastContainer').append("<div class='ToastContainerChild' id='ToastContainerChild"+ x +"'>"+ToastText+"</div><br>");

  setTimeout(function(){ $("#ToastContainerChild"+x).remove(); }, 2000);
}

无论如何，仅仅引用新元素可能更有意义。那么你不需要ID，假设这是唯一的目的。

function ShowToast(ToastText){
  var el = $("<div class='ToastContainerChild'>"+ToastText+"</div><br>");
  el.appendTo('#ToastContainer');

  setTimeout(function(){ el.remove(); }, 2000);
}

请注意，这也将删除<br>元素，我认为这是期望的元素。否则请el.first().remove()。

多次调用相同的JavaScript函数会停止前一个相同的函数

1 个答案: