<svg id="s1" width="800" 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},$)`;
}
</script>
如上,我用vsg隨機(jī)生成了30個(gè)圓,我希望點(diǎn)擊每個(gè)圓,這個(gè)圓變大變透明直至從dom樹刪除;我的程式碼慢慢一個(gè)個(gè)點(diǎn)可以實(shí)現(xiàn)該功能,但是一旦快速雙擊,就會(huì)出現(xiàn)如下圖的錯(cuò)誤:
#我猜測應(yīng)該是定時(shí)器寫的有問題,但是自己解決不了;前端小白,JS基礎(chǔ)太弱,懇請(qǐng)前輩教O(∩_∩)O~
擁有18年軟件開發(fā)和IT教學(xué)經(jīng)驗(yàn)。曾任多家上市公司技術(shù)總監(jiān)、架構(gòu)師、項(xiàng)目經(jīng)理、高級(jí)軟件工程師等職務(wù)。 網(wǎng)絡(luò)人氣名人講師,...
if(o<0.01){
clearInterval(t);
if(s1.contains(target)){
s1.removeChild(target);
}
}
這樣寫吧,先判斷這個(gè)節(jié)點(diǎn)還存在不,如果存在才刪除,如果不存在就不rmeovechild了
世界這麼大,我想去看看
不是定時(shí)器本身的問題
快速雙擊的時(shí)候,svg繪製的圓,設(shè)定了兩個(gè)定時(shí)器執(zhí)行,第一個(gè)定時(shí)器達(dá)到o等到第二定時(shí)器也達(dá)到這個(gè)條件的時(shí)候,執(zhí)行刪除動(dòng)作的時(shí)候,dom發(fā)現(xiàn)需要?jiǎng)h除的物件不存在,因此出現(xiàn)了你看到的錯(cuò)誤。
解決方法是增加判斷條件:目前的圓如果已經(jīng)設(shè)定過定時(shí)器,就不再執(zhí)行後續(xù)的程式碼。
s1.onclick=function(e){
clearInterval(t);
var target= e.target;
//判斷是否已經(jīng)設(shè)置過了定時(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);
}
}