[Vuejs]-Destroying instance of my counter when changing view using router in vue

by

3👍

✅

requestAnimationFrame returns the ID of the request as an integer value. You have to store this ID and when the vue component is destroyed you should call cancelAnimationFrame with the same ID.

export default {
name: "HelloWorld",

data: function () {
    return {
        debugInc: 0,
        id: null,
    };
},

created() {
    this.loop();
},

methods: {
    loop() {
        this.id = requestAnimationFrame(this.loop);
        console.log(this.debugInc);
        this.debugInc = this.debugInc + 1;

        if (this.debugInc > 59) {
            this.debugInc = 0;
        }
    },
},
beforeDestroy() {
    console.log("DESTROY");
    cancelAnimationFrame(this.id);
},

};

👤Faran Ali

Leave a comment