score:1

Accepted answer

When you use a string as argument, such as

setTimeout('move()',1000);

setTimeout picks the function from the global scope (window, in your case), but since you are defining move() inside the document.ready argument function, it is not going to the global scope.

The solution is to directly use a reference to the move function as argument to the setTimeout:

setTimeout(move, 1000);

This way it picks it from the local scope, where the function exists.

Similar question

score:-1

Here's what you need to see:

$(function(){

function ba(){
   $('#block').animate({left:'+=50px' }, 1000).animate({top:'+=50px'}, 1000).animate({left:"-=20px"}, 1000).animate({top:'-=20px'}, 1000);
}
function move(){
  ba();
  setTimeout(ba, 1000);
}
move();

});

score:0

The downvoted answer is correct. setTimeout takes a function value (an uninvoked function), not an invoked function like you have: setTimeout('move()',1000);

try this instead: setTimeout(move,1000);

score:0

To call a function on every second you can use .

<script type="text/javascript">
        $(document).ready(function(){

            function move(){
                console.log("Called");
                $("#block").animate({left:"+=50px" },1000).animate({top:"+=50px"},1000).animate({left:"-=20px"},1000).animate({top:"-=20px"});

            }

            window.setInterval(function(){
              move()
            }, 1000);
        })
    </script>

check your console then,

score:1

As I found your script is working good. but you can do like this.

$(document).ready(function(){
    move();
});

function move(){
        $("#block").animate({left:"+=50px" },1000).animate({top:"+=50px"},1000).animate({left:"-=20px"},1000).animate({top:"-=20px"});
        setTimeout('move()',1000);
}

score:2

It appears that you don't even need a setTimeout() at all.

Assuming what you want is for yoru animation to loop and repeat over and over, the proper way to do this is to use the completion callback from the .animate() and not use a setTimeout() at all. You can do that like this:

$(document).ready(function(){

    function move(){
        $("#block").animate({left:"+=50px" },1000)
                   .animate({top:"+=50px"},1000)
                   .animate({left:"-=20px"},1000)
                   .animate({top:"-=20px"}, 1000, move);
    }
    // call it the first time
    move();
});

jQuery will sequence the four animations for you automatically.

What you want to know is when the last one is done so you can then start the whole thing over again. You can use the completion function from the last .animate() operation to have it just call move() again. Because this callback is called asynchronous, there is no stack build-up or recursive build-up on the stack and this can happily run forever.


By way of explanation, your setTimeout() did not work because when you pass a string as the first argument to setTimeout(), then that string is evaluated in the global scope and you don't have a move() function in the global scope, thus it was not found and nothing executed. If you pass a plain Javascript function reference as in setTimeout(move, 1000), then the function reference is evaluated in the current scope (before the setTimeout call is even made) and that function reference is passed correctly. You should pretty much never pass a string to setTimeout(). It's just a bad habit that should nearly always be avoided and can always be avoided. But, alas, it appears you don't even need a setTimeout() here anyway.


If you wanted the four animations to sequence one after the other, then pause 1 second before repeating the animations again and again, you could do this:

$(document).ready(function(){

    function move(){
        $("#block").animate({left:"+=50px" },1000)
                   .animate({top:"+=50px"},1000)
                   .animate({left:"-=20px"},1000)
                   .animate({top:"-=20px"}, 1000, function() {
                       setTimeout(move, 1000);
                   });
    }
    // call it the first time
    move();
});

Here, an anonymous function is passed as the completion callback to the last animation. In that completion function, a setTimeout() is run that will call move again in 1000ms.

P.S. I note that your animation is not symmetrical so it does not return to the same spot it started so thus every time it runs, the object will move 30px to the right and 30px down continually over and over. I'm not sure if that's what you intended or not.


Related Query