score:1
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
- JQuery If Block inside setTimeout function not working
- Jquery setTimeout is making issues and not working properly in loop
- My jquery click isnt working
- How can i get this function working in Gravity Forms?
- writing jquery function in wordpress not working
- JQuery custom function not working
- jQuery click to fadeIn function not working
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
- jQuery Ajax function not working in Wordpress
- Tab function not working in firefox using html and javascript
- jQuery keypress function not working properly
- jquery focus function is not working in iphone
- Infinite page scroll function with Mysql not working
- jQuery Animate function not working properly
- working with '#!' in a ajax function url
- Video ended function not working on mobile
- jquery hover function not working as expected on multiple sliders
- jQuery.focus() function not working
- Bootbox Modal call not working in prepend function
- Check form with onclick() function not working properly
- Check form with onclick() function not working properly
- Jquery Each Function Is Not Working How I Expect
- about jquery ajax, the php file had run but the success function is not working
- jquery function is not working in ajax success function
- Javascript function in HTML not working
- color picker function working upside down
- Ajax function call not working
- Ajax function call not working
- Ajax is not working properly with each function
- setTimeout not working properly with ajaxStart
- timeout function not working
- Part of click function not working on first click
- Part of click function not working on first click
- onclick function to change url - not working everytime
- Jquery delay() function not working
- Cordova - setTimeout with anonymous function firing immediately
- Bootstrap popover dismiss function not working in iphone
- Jquery Show/Hide Function not working
- jquery sorting function not working
- Check if a preload function is working properly
- timer function not working on IE 11 using jscript on apex page
- Javascript: checkbox onchange/onclick function not working
- "this" keyword is not working inside jquery function
- Undo & Redo function not working as expect
- Loop parameters not working inside of function jQuery
- setTimeout function completely freezes any output?
- jQuery running total function not working on all fields
- Add To Basket Function Not Working
- Why jQuery Focus function not working on second time?
- Setup Function not working in TinyMCE
- Javascript and jquery if function is not working
More Query from same tag
- jquery fill inputfield automatically in calculator
- Error with JQuery 1.9.1 and Knockout fadeOut()
- Menu-Toggle does not work
- How to switch to Jquery pop ups inselenium webdriver using java
- What happen when a value of an Array is Erased while Looping?
- Jquery To change according to browser width
- Only refresh parent page
- jQuery bottom position or transition reverse?
- Z-index rendering links unclickable
- MVC3 and JSON model binding
- Detect IE 7 Emulate while running in IE 8+
- Update Scope on jquery click
- Using slick (jquery plugin) with dojo
- how to use $localStorage dynamically in angularjs?
- Having trouble with jquery detach reshowing div content
- Wrap a bunch of different html tags with jquery
- JavaScript / Jquery - Running a script on load
- Globalize for Currencies
- My slider doesn't work as it should after viewing 3 "screens"
- React with jquery does not update the UI on dom change
- how to access nested json data comin from mvc which returns jsonresult
- ReferenceError: jQuery is not defined after upgrading to JSF2.2 and RF4.5
- Wont load content while scrolling - mysql error
- Do I need server to access json value
- How to call a custom action result from Javascript
- Ajax request not changing HTML
- Ajax post data while loop php
- jquery $.ajax() not working in application hosted server
- JQuery how to reference JSON value
- Validating sets of radio buttons a second time?