javascript - 通过 onClick 反应添加元素并在超时后删除它们

Question

我想在按钮上创建涟漪效应。

当我单击 Button 组件时，我想添加 span 元素作为它的子元素。它包含一些 CSS 来制作涟漪效果。900 毫秒后，我想删除这个 span 元素。这个想法在这里成立

这里有一些沙盒来解释主要思想。

所以，问题是当我快速多次点击并且涟漪效应范围无法正常工作时

Answer 1

由于您使用的是单个涟漪而不是多个涟漪，因此您的效果仅在用户没有第二次单击时才有效，而自第一次单击以来的时间和您的 900 毫秒超时尚未过去。

您可以按需创建生成的涟漪，并在动画以自定义事件结束后将其删除。因此，如果用户单击多次，使用 setTimeout() 总是会触发错误行为，因为您的代码会强制单个涟漪像单独的多个涟漪一样工作。

希望我的解释足够准确和清楚。