时间戳

首页 > 解决方案 > 多次添加课程时仅删除一次课程

javascript - 多次添加课程时仅删除一次课程

问题描述

我有以下代码：

btn.onclick = function() {
   toast.classList.add('showToast')
   setTimeout(function() {
      toast.classList.remove('showToast')
   }, 3100)
}

假设在 0 秒时我在按钮上单击了很多次，所以可能在 3.1 秒时我收到了很多关于 toast 的删除句柄，这不是我所期望的，因为可能在 3.2 秒时我再次单击按钮一次 toast 立即消失而不是动作在 3.1 秒内。我希望用户可以多次点击按钮，相当于addClass()处理了很多时间，但removeClass()只处理了一次，对应于最后一次addClass()和最后一次点击。我该怎么做，或者你能给我另一种方法来处理这个，谢谢

标签： javascript

解决方案

听起来您想在再次单击该按钮时取消任何仍处于活动状态的超时。在这种情况下，您需要将计时器 ID 存储在函数外部的变量中，然后在设置新超时之前对其调用 clearTimeout。

let timerId;
btn.onclick = function() {
   toast.classList.add('showToast')
   clearTimeout(timerId);
   timerId = setTimeout(function() {
      toast.classList.remove('showToast')
   }, 3100)
}

请注意，如上所示timerId是一个全局变量，但这并不理想。理想情况下，此代码位于某个函数内，这意味着timerId不会污染全局范围。但这取决于您未向我们展示的有关代码架构方式的信息。

推荐阅读