Jquery Setinterval with incorrect speed when clicking

Question

Well, I basically created a class to filter and read an atlas style spritesheet, it works, but when clicking to change the orientation of the Sprite or even reload the same Prite, the system accelerates the speed with each click.

Online example of how it is: https://spriteframework.000webhostapp.com

This is the function responsible for updating the frames and also and she is giving trouble.

if (!intervalId) {
                var intervalId = setInterval(function () {
                    $('.sprite-container > span:first')
                        .fadeOut(0)
                        .next()
                        .fadeIn(0)
                        .end()
                        .appendTo('.sprite-container');
                }, fps);

            } else {
                clearInterval(intervalId);
                intervalId = null;
            }

Follow the full code function to generate a Sprite animation

function GetSprite(data = false, action = 'idle', fps = false, loop = true) {
        $('.sprite-container').empty();

        //Load Json Data
        $.getJSON(data, function (data) {

            //Main vars
            var fps = 60;

            //first frame fix
            var first = 0;
            var i = 0;

            //Create frame element
            $.each(data.frames, function (i) {

                //Limit to create only by action type
                if (data.frames[i].action == action) {

                    actionType = "." + action;

                    $('<span/>', {
                        class: data.frames[i].action + " sprite-template",
                        style: 'background-image:url("' + data.file +
                            '");background-position: -' + data.frames[i].posX + 'px -' + data
                            .frames[i].posY + 'px',
                    }).appendTo('.sprite-container');
                }
            });

            $(".sprite-container > span:gt(0)").hide();



            if (!intervalId) {

                var intervalId = setInterval(function () {
                    $('.sprite-container > span:first')
                        .fadeOut(0)
                        .next()
                        .fadeIn(0)
                        .end()
                        .appendTo('.sprite-container');
                }, fps);

            } else {
                clearInterval(intervalId);
                intervalId = null;
            }
        });
    };

Answer 1

The problem is that every click on one of the buttons are being created several instances of setInterval and will never access the else where the same is canceled, because you are declaring the interval within the if and he will always be false.

One solution is to declare the variable that will receive the range outside the function:

var intervalId;
function GetSprite(data = false, action = 'idle', fps = false, loop = true) {
...

And remove the var when adding the range to the variable there in the if:

if (!intervalId) {
   intervalId = setInterval(function () {
   ...