Javascript Can'；t在超时后删除新添加的HTML元素

我试图在没有任何库的情况下创建一个Google材质“涟漪”效果。为此，我使用了一个脚本来“模拟”jQuery的偏移量方法：

function offset(elt) {
    var rect = elt.getBoundingClientRect(), bodyElt = document.body;
    return {
        top: rect.top + bodyElt.scrollTop,
        left: rect.left + bodyElt.scrollLeft
    }
}

我举了一个动画的例子，但我甚至不知道react的基础知识，所以我做了一些类似于他的代码的东西，主要用于动画。我的问题是，为了达到这个效果，我在所有修改完成后添加了一个新的

，并在一秒钟的延迟后删除了旧的

，只需单击一次，它就可以正常工作，但如果我多次单击，新的
元素仍然在这里。我远非JS大师。所以如果你看到一个大错误，告诉我，我会改进我的代码。HTML、SCSS和JS的所有代码都是可见的。
我的HTML：

<button>
    <span class="ripples">
        <span class="ripples-circle"></span>
    </span>Test
</button>
<button>
    <span class="ripples">
        <span class="ripples-circle"></span>
    </span>Test
</button>
<button>
    <span class="ripples">
        <span class="ripples-circle"></span>
  </span>Test
</button>
<button>
    <span class="ripples">
    <span class="ripples-circle"></span>
  </span>Test
</button>
<button class="round">
    <span class="ripples">
        <span class="ripples-circle"></span>
    </span>Test
</button>

JavaScript:

;(function(window, document, undefined){
    'use strict';
    //http://www.debray-jerome.fr/js-performance-la-fonction-offset-de-jquery-vs-vanilla-javascript-23.html -- french
    function offset(elt) {
        var rect = elt.getBoundingClientRect(), bodyElt = document.body;
        return {
            top: rect.top + bodyElt.scrollTop,
            left: rect.left + bodyElt.scrollLeft
        }
    }

    //http://www.sitepoint.com/css3-animation-javascript-event-handlers/

    var pfx = ["webkit", "moz", "MS", "o", ""];
    function prefixedEvent(element, type, callback) {
        for (var p = 0; p < pfx.length; p++) {
            if (!pfx[p]) type = type.toLowerCase();
            element.addEventListener(pfx[p]+type, callback, false);
    }
}

function calcDiag(a, b) {
    return Math.sqrt((a * a) + (b * b));
}

    var buttons = document.querySelectorAll('button');
    for(var i=0; i < buttons.length;i++ ){
        buttons[i].addEventListener('click', function(e){

        var rippleThis = this;
        var parentOffset = offset(rippleThis);
        var elHeight = rippleThis.offsetHeight;
        var elWidth = rippleThis.offsetWidth;
        var pageX = e.pageX == undefined ? e.nativeEvent.pageX : e.pageX;
        var pageY = e.pageY == undefined ? e.nativeEvent.pageY : e.pageY;
        var x = pageX - parentOffset.left;
        var y = pageY - parentOffset.top;

        var topLeftDiag = calcDiag(x, y);
        var topRightDiag = calcDiag(elWidth - x, y);
        var botRightDiag = calcDiag(elWidth - x, elHeight - y);
        var botLeftDiag = calcDiag(x, elHeight - y);
        var rippleRadius = Math.max(topLeftDiag, topRightDiag, botRightDiag, botLeftDiag);
        var rippleSize = rippleRadius * 2;

        var j;
        var childrenLength = rippleThis.childNodes.length;
        var targetParent;
        var targetChild;

        for(j = 0; j < childrenLength; j++){
          if(rippleThis.childNodes[j].className == 'ripples') {
            targetParent = rippleThis.childNodes[j];
            targetParent.style.top = (y - rippleRadius) + 'px';
            targetParent.style.left = (x -rippleRadius) + 'px';
            targetParent.style.height = rippleSize +'px';
            targetParent.style.width = rippleSize +'px';
            targetParent.className = 'ripples is-active';
          }
        }

       //New span element
       var rippleSpan = document.createElement('span');
       var rippleCircleSpan = document.createElement('span');
       rippleSpan.className = "ripples";
       rippleCircleSpan.className = "ripples-circle";
       //Add new span
       rippleSpan.appendChild(rippleCircleSpan);
       rippleThis.insertBefore(rippleSpan, rippleThis.childNodes[0]);
    }, false);
    buttons[i].addEventListener('mouseup', function(e){
      prefixedEvent(e.currentTarget, "TransitionEnd", function(e){
      var button = e.currentTarget;
        for(var j = 0; j < button.childNodes.length; j++){
          if(button.childNodes[j].className == 'ripples is-active') {
            var targetParent = button.childNodes[j];
            targetParent.style.opacity = 0;
            setTimeout(function(){
              if(targetParent.parentNode){ targetParent.parentNode.removeChild(targetParent);             
              }
            }, 1000);

          }
        }
    });
    }, false);
}
})(window, document);

；（功能（窗口、文档、未定义）{
"严格使用",；
//http://www.debray-jerome.fr/js-performance-la-fonction-offset-de-jquery-vs-vanilla-javascript-23.html --法语的
功能偏移（elt）{
var rect=elt.getBoundingClientRect（），bodyElt=document.body；
返回{
顶部：rect.top+bodyElt.scrollTop，
左：rect.left+bodyElt.scroll左
}
}
//http://www.sitepoint.com/css3-animation-javascript-event-handlers/
var pfx=[“webkit”、“moz”、“MS”、“o”和“”]；
函数prefixedEvent（元素、类型、回调）{
对于（var p=0；p

我想要的最终效果是可见的。
从我从你的链接站点上可以看出，视觉效果非常好，问题是你的剩余跨度。我相信您的问题实际上是
关闭
，与react无关。最近我遇到了一个类似的问题（在一个完全不同的环境中，但基本原理是一样的），我通过删除超时并使用检查超时条件的间隔来解决它。这就是它的工作原理：

有一个javascript变量，该变量保存所有活动元素在创建时的数组。每1秒循环一次所有元素，查看它们的计时器是否已过期。如果是，请将其移除

这显然不是最有效的解决方案，因为它需要（几乎）不断地检查元素，但它肯定会起作用。如果这不是在性能密集型环境中实现的，那么它的性能应该相当好

另外，如果您找到另一个解决方案，我很高兴看到我是否也能实现。
我找到了解决问题的方法。工作脚本是可见的。
我将前缀事件移到代码的上方，在它成为
mouseup
事件的单独
eventListener
之前，更重要的是，我在父
span
元素上调用它，在它打开
按钮之前，这就是事件不起作用的原因。我在
setTimeOut
condition中又添加了一个条件：

以前

if(targetParent.parentNode){

之后

所以现在我的代码可以工作了，
span
s从
DOM
我和这些家伙一起工作。如果你明天还没有得到答案，请告诉我，我会让他们中的一个来帮助你。@chapinkapa因为你看不到答案，所以如果你能感谢你，好吧，我会问他们TBBT小提琴应该得+1分
if(targetParent.parentNode){

if(targetParent && targetParent.parentNode){