Skip to content Skip to sidebar Skip to footer

My Settimeout Doesn't Work Correctly

this is the code: var stripeAnimation = function() { var streetDivWidth = $('.street_name').width(); var streetFull = $('.street_name .street_name_text'); for(var i=0; i

Solution 1:

If you want to loop, then you need to use setInterval()

setInterval(infinite, 10000);

then

function infinite() {
    item.animate({
        marginLeft: '-' + remainder + 'px'
    }, animationSpeed).animate({
            marginLeft: 0
        }, widthFull);
}

Solution 2:

Remainder variable is local and u are using it as like global function. should declare it globally.

Solution 3:

setTimeout will call your function only once but, as Arun P said, you have the choice of using setInterval, only it isn't recommended for animation. The problem with setInterval is that the delay interval you specify is the minimum time until it will be called but not a promise it will be called when that interval is over.

An example will be, if you set an interval of 300 milliseconds but the queue was held up by other operations (UI or other JS operations) for, let's say, 600 milliseconds your function will be called twice, one after the other with no delay, which will make your animation uneven. You can't ensure a timeout will be called at exactly your interval, only no less than that interval.

A better approach would be to make your first initial call with a setTimeout, as you have done, and again at the end of the infinite() function call setTimeout(infinite, 1000) again.

With all that said, if it's applicable, the best way to do animations is the requestAnimationFrame method, you can look into it here:

https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

Post a Comment for "My Settimeout Doesn't Work Correctly"