Recursive function JS

Question

I've written a few functions and need to execute them one after another endlessly.

var bGposition = $("ul.sigProClassic li.sigProThumb a.sigProLink img.sigProImg");
function posDown() {
    bGposition.css({
        backgroundPosition: "0% 0%",
    }).animate({
        backgroundPositionX: '100%',
        backgroundPositionY: '100%',
    }, 3000)
 }

function posUp() {
    bGposition.css({
    backgroundPosition: "100% 100%",
    }).animate({
        backgroundPositionX: '0%',
        backgroundPositionY: '0%',
    }, 3000)
}
posUp();
posDown();
posUp();
posDown();

I've already found a way to make it work, but I need to call a function every time manually.

The problem is, when using a callback I'm getting a "maximum call stack size exceeded" error, after that it's starting to work.

setTimeout is not working in this case.

How can i fix it? Please help!

P.S. Sorry for my English!

You want to use setInterval not setTimeout for something to repeat after x amount of time, setTimeout is just setting a delay not repetition — akaBase
– akaBase, Commented Nov 17, 2018 at 19:12

Cue · Accepted Answer · 2018-11-17 19:18:05Z

1

Add the posUp and posDown as a callback function to your jQuery.animate.

var bGposition = $("ul.sigProClassic li.sigProThumb a.sigProLink img.sigProImg");
function posDown() {
    bGposition.css({
        backgroundPosition: "0% 0%",
    }).animate({
        backgroundPositionX: '100%',
        backgroundPositionY: '100%',
    }, 3000, posUp)
 }

function posUp() {
    bGposition.css({
    backgroundPosition: "100% 100%",
    }).animate({
        backgroundPositionX: '0%',
        backgroundPositionY: '0%',
    }, 3000, posDown)
}
posUp()

answered Nov 17, 2018 at 19:18

Cue

2,7591 gold badge14 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alexander Semizbayev Over a year ago

Thanks!But it not works with backgroundPosition, if we remove them , everything else will work fine!

Alexander Semizbayev · Accepted Answer · 2018-11-19 06:20:40Z

0

I've "solved" this problem by adding a callback and removing background-position.Thanks a lot!

var bGposition = $("ul.sigProClassic li.sigProThumb a.sigProLink img.sigProImg");
function posDown() {
    bGposition.animate({
        backgroundPositionX: '100%',
        backgroundPositionY: '100%',
    }, {
        duration: 3000,
        queue: true,
        complete: function() {
            bGposition.animate({
                backgroundPositionX: '0%',
                backgroundPositionY: '0%',
            }, {
                duration: 3000,
                queue: true,
                complete: posDown()
            })
        }
    })
}
posDown();

answered Nov 19, 2018 at 6:20

Alexander Semizbayev

1

Collectives™ on Stack Overflow

Recursive function JS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related