Jquery Setinterval with incorrect speed when clicking

Asked

Viewed 31 times

0

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;
            }
        });
    };
javascript jquery html5

  • you have a variable fps which has a Boolean value at the beginning, then declares another with the same name with numeric value, should use different names

1 answer

2


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 () {
   ...

Browser other questions tagged javascript jquery html5

You are not signed in. Login or sign up in order to post.