多个setInterval冲突

Question

想尝试一下用setInterval做弹幕，对发送按钮绑定了下面这段函数，但是每点击一次都会造成之前的setInterval失效。也就是说一个弹幕跑到中途，如果这个时候又发送了新的弹幕就会使得前面的弹幕停下来。难道每次click事件之后不是都注册了一个新的setInterval吗？
想不通问题出在哪里，求解惑，十分感谢！

function danmuSend(){
    var danmuInput = document.getElementsByClassName("danmu-input")[0].value;
    danmuWrap.innerHTML = "<div class='danmu' style='position:absolute; top:" + Math.floor(Math.random()*390) +"px; right:" + 5 +  "px'>" + danmuInput + "</div>" + danmuWrap.innerHTML;
    var danmu = document.getElementsByClassName("danmu")[0];
    var danmuMove = setInterval(function(){
        var danmuY = parseInt(danmu.style.right);
        danmuY += 5;
        danmuY > 790 && clearInterval(danmuMove);
        danmu.style.right = danmuY + 'px';
        alert(danmuY);
    },16.7);
}

Answer 1

扫了遍代码，感觉逻辑明显有问题。你每次点击之后 都用 innerHTML 这个东东替换。这样的话，你想想原来在动的 那个dom 不就被你给除掉了吗？虽然 你后面有累加，但是这个只是累加进来的做拼接的标签。生产一个新的一串字符标签再插到页面sanmuWrap里面。而后面累加进来的标签，插进去渲染了出来后，你并没有在再拿到这dom（这是个新的，之前的已经别你替换消失了）对象给他绑定事件呀。你只是每次都取的 document.getElementsByClassName("danmu")[0];这对象啊，跟你后面拼接出来的有毛关系啊。