問(wèn)題描述

<svg height='500'></svg><script> var frag=document.createDocumentFragment(); for(var i=0;i<30;i++){var c=document.createElementNS('http://www.w3.org/2000/svg','circle');c.setAttribute('r',rn(5,160));c.setAttribute('cx',rn(0,800));c.setAttribute('cy',rn(0,500));c.setAttribute('fill',rc(0,256));c.setAttribute('fill-opacity',Math.random());frag.appendChild(c); } s1.appendChild(frag); s1.onclick=function(e){clearInterval(t);var target= e.target;if(target.nodeName=='circle'){ var r=target.getAttribute('r'); var o=target.getAttribute('fill-opacity'); var t=setInterval(function(){r*=1.05;o*=0.9;target.setAttribute('r',r);target.setAttribute('fill-opacity',o);if(o<0.01){ clearInterval(t); s1.removeChild(target);} },10);} } function rn(min,max){var n=Math.floor(Math.random()*(max-min)+min);return n; } function rc(min,max){var r=rn(min,max);var g=rn(min,max);var b=rn(min,max);return `rgb(${r},${g},${b})`; }</script>

如上，我用vsg隨機(jī)生成了30個(gè)圓，我希望點(diǎn)擊每個(gè)圓，這個(gè)圓變大變透明直至從dom樹(shù)刪除；我的代碼慢慢一個(gè)個(gè)點(diǎn) 可以實(shí)現(xiàn)該功能，但是一旦快速雙擊，就會(huì)出現(xiàn)如下圖的錯(cuò)誤：

我猜測(cè)應(yīng)該是定時(shí)器寫(xiě)的有問(wèn)題，但是自己解決不了；前端小白，JS基礎(chǔ)太弱，懇請(qǐng)前輩教O(píng)(∩_∩)O~

問(wèn)題解答

if(o<0.01){clearInterval(t); if(s1.contains(target)){ s1.removeChild(target); } }

這樣寫(xiě)吧，先判斷這個(gè)節(jié)點(diǎn)還存在不，如果存在才刪除，如果不存在就不rmeovechild了

世界這么大，我想去看看

不是定時(shí)器本身的問(wèn)題

快速雙擊的時(shí)候，svg繪制的圓，設(shè)置了兩個(gè)定時(shí)器執(zhí)行，第一個(gè)定時(shí)器達(dá)到o<0.01的時(shí)候，已經(jīng)刪除了點(diǎn)擊的圓。等到第二定時(shí)器也達(dá)到這個(gè)條件的時(shí)候，執(zhí)行刪除動(dòng)作的時(shí)候，dom發(fā)現(xiàn)需要?jiǎng)h除的對(duì)象不存在，因此出現(xiàn)了你看到的錯(cuò)誤。

解決方法是增加判斷條件：當(dāng)前的圓如果已經(jīng)設(shè)置過(guò)定時(shí)器，就不再執(zhí)行后續(xù)的代碼。

s1.onclick=function(e){clearInterval(t);var target= e.target;//判斷是否已經(jīng)設(shè)置過(guò)了定時(shí)器if (target.getAttribute('interval') === '1')　return;//在元素上增加設(shè)置定時(shí)器的標(biāo)記target.setAttribute('interval', '1');if(target.nodeName=='circle'){ var r=target.getAttribute('r'); var o=target.getAttribute('fill-opacity'); var t=setInterval(function(){r*=1.05;o*=0.9;target.setAttribute('r',r);target.setAttribute('fill-opacity',o);if(o<0.01){ clearInterval(t); s1.removeChild(target);} },10);} }