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

下面是一个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);
}

var toastbtcicks=0；
函数ShowToast（Toast文本）{
toastbtcnicks++；
$（“#toast容器”）。追加（“+toast文本+”
”）；
//document.getElementById（“ToastContainer”）.className=“show”；
setTimeout（函数（）{$（“#ToastContainerChild”+toastbtclicks.remove（）；}，2000）；
}

每当调用showtoos函数时，都会将一个新的div元素附加到元素#toast container。这一过程正在完美运作。另外，调用函数2秒钟后，使用setTimeOut方法删除新元素。我面临的问题是，如果我们多次调用该函数（而不等待其余的被删除），并且在几秒钟后如果我们停止连续调用该函数，则只有最后附加的元素被删除（2秒后）。为什么？ 我希望该功能删除网页中的所有附加元素，在创建（或附加）后2秒。我该怎么做？

---

很抱歉我的英语不好，如果是…

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

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

var toastbtcicks=0；
函数ShowToast（Toast文本）{
var x=++toastbtcicks；//注意前缀++
$（“#toast容器”）。追加（“+toast文本+”
”）；
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);
}

函数showtoos（toast文本）{
var el=$（“”+ToastText+“
”）；
el.附录（“#toast container”）；
setTimeout（函数（）{el.remove（）；}，2000）；
}

---

请注意，这也将删除

元素，我认为这是需要的。否则请执行

el.first（）.remove（）

可能的重复。如果有一个名为

toastbtcnicks

的变量，该变量将被更新，它将始终等于最后一个数字，。您需要函数中数字的快照，只需创建另一个变量，例如，

toastNo

，并将其设置为

toastbtcicks

，然后在setTimeout回调中使用

toastNo

。@JJJ:这不是循环中的闭包问题。这只是一场标准的数据竞赛……为了纠正我自己，这是一场“竞赛条件”。JS没有数据竞争。感谢您最快的回复。我还没有试过，但我相信它会成功的。我的大脑没有你的快。现在我明白了。再次感谢。您新编辑的答案更有帮助。非常感谢。很高兴它有帮助。