javascript - Cannot delete element after intervals end - Stack Overflow

admin管理员组

文章数量:1345329

I actually using plain JS, and got simple issue. I'm doing simple fade in and out animation. But after animation i cannot remove element... I got only idea to just: set zIndex lower and setTimeout to remove element later, when interval for sure is not workin. Any idea / explaination about mistake i made i really appreciate.

Oh i fot - for testing i not trigger it from code, but from browser console.

Here is my part of my code:

var transition_effect = {
    anim_counter: 0,
    is_animation_on: false,
    frame_timer: 0,
    FPS: 50,
    fade_in: function(element, time){},
    fade_out: function(element, time){}
}

/*
...
*/

transition_effect.fade_out = function(element, time){
    FPS = this.FPS;
    frame_timer = this.frame_timer;
    var anim = setInterval(function(){
        if(this.frame_timer <= time){
            let velocity = 1/(time/this.FPS);
            let frame_count = this.frame_timer/this.FPS;
            element.style.opacity = 1-(velocity * frame_count);
            if(debug)
                console.log("Transition - fade in: frame = " + frame_count + ", velocity = " + velocity + ", opacity = " + velocity * frame_count)
        }
        
        if(this.frame_timer == time){
            this.frame_timer = 0;
            clearInterval(anim);
            //not work
            document.body.removeChild(document.getElementsByTagName("div")[0]);
            //not work either
            document.body.innerHTML = '';
        }
        this.frame_timer = (this.frame_timer + this.FPS);

        document.body.innerHTML = "";
        document.body.append(element);
    }, 1000/this.FPS);
    
}

本文标签： javascriptCannot delete element after intervals endStack Overflow