Stop function (clearInterval), inside the object does not work

Question

I have this object, it works well but I wanted to add a property to stop, this is not working:

JS:

var kissesAni = {
    init: function () {
        kissesAni.callAni();
    },
    callAni: function(){
        window.setInterval(function(){
            kissesAni.makeImgAni();
        }, 30);
    },
    stop: function() {
        window.clearInterval(kissesAni.callFontFlakes);
    },
    makeImgAni: function(){
        ...
    }
};
kissesAni.init();
    window.setTimeout(function() {
        console.log('heya');
        kissesAni.stop();
    }, 5000);

Jsfiddle

I mean, does the console.log('heya') but the animation doesn’t stop.

Answer 1

You need to put the setInterval return inside a variable, and then use clearInterval.

Try something like:

var kissesAni = {
		interval: null,
    init: function () {
        this.interval = kissesAni.callFlakes();
    },
    callFlakes: function(){
        return window.setInterval(function(){
            kissesAni.fontFlake();
        }, 30);
    },
    stop: function() {
        window.clearInterval(this.interval); // já tentei com this em vez de "kissesAni"
    },
    fontFlake: function(){
       
    }
};