多次调用同一个 JavaScript 函数会停止之前的同一个函数答案

【问题标题】：Calling the same JavaScript function multiple times stops the previous same function多次调用同一个 JavaScript 函数会停止之前的同一个函数
【发布时间】：2018-04-16 16:22:28
【问题描述】：

下面是一个 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 秒从网页中删除所有附加的元素。我该怎么做？抱歉我的英语不好，如果是的话......

【问题讨论】：

JavaScript closure inside loops – simple practical example的可能重复
您有一个名为ToastBtnClicks 的变量，它会被更新，它总是等于最后一个数字。您需要在函数中获取数字的快照，只需创建另一个名为 toastNo 的变量，并将其设置为 ToastBtnClicks 并在 setTimeout 回调中使用 toastNo。
@JJJ：这不是循环中的闭包问题。这只是一场标准的数据竞赛。
...纠正自己，这是一个“竞争条件”。 JS 没有数据竞争。

标签： javascript jquery function settimeout

【解决方案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()。

【讨论】：

感谢您最快的回复。我还没有尝试过，但我确信它会起作用。我的大脑不像你的那样跑得更快。现在我懂了。再次感谢。
您新编辑的答案更有帮助。非常感谢。
很高兴它有帮助。