国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

javascript - 關(guān)於定時(shí)器 與 防止連續(xù)點(diǎn)擊 問題
高洛峰
高洛峰 2017-06-21 10:12:14
0
2
1141


<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ò)人氣名人講師,...

全部回覆(2)
給我你的懷抱
            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);
        }
    }
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板