I think the pop window with OK string will be dislayed afetr 5s after I click the button, but the pop window dispalyed immediately after I click the button, why?
Thanks!
<html>
<head>
<title>Wake up call</title>
<script type="text/javascript">
function wakeUpCall() { // Function is defined here
setTimeout(aa("ok"), 5000);
}
function aa(bb) {
alert(bb);
}
</script>
</head>
<body bgcolor="lightblue">
<form>
<input type="button"
value="Wake me"
onclick="wakeUpCall()">
</form>
</body>
</html>
function wakeUpCall() { // Function is defined here
setTimeout(function(){ alert("ok");}, 5000);
}
You are trying to do it the wrong way.
You have to use a callback for the setTimeout:
setTimeout(function()
{
// actual code here
}, 5000);
Mike has provided in his answer - that you could use an evaluatable string:
setTimeout('/* actual code here */', 5000);
But that is strongly discouraged, use his other example - passing the callback function as a reference and invoking callback arguments.
You have to take in mind, though, that if you are going with callback arguments, see this section of MDN article. The callback arguments aren't supported in all browsers.
Personally, I'd suggest going with plain old callbacks, because that's how the setTimeout is meant to be used.
Just for your information:
The reason why your snippet isn't working for you, is, because:
setTimeout(aa('ok'), 5000);
// aa('ok') here is executed, and returns its value, so, in the end, you pass the returned value of aa inside the Timeout.
// and, nor alert alert, nor your function have a "return" statement, so they both will return always undefined.
// that translates to:
setTimeout(undefined, 5000); // and, that does nothing
What if you would do it like this:
<html>
<head>
<title>Wake up call</title>
<script type="text/javascript">
function wakeUpCall() { // Function is defined here
setTimeout('aa("ok");', 5000);
}
function aa(bb) {
alert(bb);
}
</script>
</head>
<body bgcolor="lightblue">
<form>
<input type="button"
value="Wake me"
onclick="wakeUpCall()">
</form>
</body>
</html>
Notice I have quoted the statement to execute in the setTimeout function. It those quotes confuse you, I think this is a good resource to take a look at: https://developer.mozilla.org/en-US/docs/DOM/window.setTimeout
Another way to do it, I just learned from the resource above, is like this:
function wakeUpCall() { // Function is defined here
setTimeout(aa, 5000, "Your tekst here");
}
Use anonymous functions for this.
<html>
<head>
<title>Wake up call</title>
<script type="text/javascript">
function wakeUpCall() { // Function is defined here
setTimeout(function(){aa("ok");}, 5000);
}
function aa(bb) {
alert(bb);
}
</script>
</head>
<body bgcolor="lightblue">
<form>
<input type="button"
value="Wake me"
onclick="wakeUpCall()">
</form>
</body>
</html>
Related
see these 2 example
<head>
<script language="JavaScript" type="text/javascript">
var mTimer=setTimeout(foo();1000);
</script>
</head>
Other example
<head>
<script language="JavaScript" type="text/javascript">
var mTimer;
function test(){ mTimer=setTimeout(foo();1000);}
</script>
</head>
In example 1, when we load the page the mTimer=setTimeout(foo();1000); won't run
In example 2, when we click button to trigger test(); then this time mTimer=setTimeout(foo();1000); starts to run.
Why setTimeout put outside a function will not be triggered when loading the page?
setTimeout definitely works outside of a function.
Unless foo is a function that returns another function, more than likely you want
// do this
var mTimer = setTimeout(foo, 1000);
Instead of
// don't do this
var mTimer = setTimeout(foo(), 1000);
The difference is in the first code, a reference to function foo is passed to setTimeout where as in the second code, the return value of foo() is passed to setTimeout
Run this code snippet to see it work
function foo() {
alert("it works!");
}
setTimeout(foo, 1000);
I have a function foo(peram) which I want to call from multiple jquery .keyup() events.
How can I define/pass function foo so that I can call it from inside the event?
I tried something like this:
function foo(peram) {
alert(peram);
}
$("#someElement").keyup(function(alert) {
foo("You pressed a key!");
});
However I get TypeError: foo is not a function.
Update:
I have removed everything from my script and html, and it still does not work.
html:
<html>
<head>
<script src="../jquery-1.10.2.js" type="text/javascript"></script>
<script src="test.js" type="text/javascript"></script>
</head>
<body onload="asdf()">
<input type="text" name="name">
</body>
</html>
test.js:
function asdf() {
function hqxftg(stuff) {
alert(stuff);
}
$(document).ready(function() {
$('[name="name"]').keyup(function(hqxftg) {
alert(typeof hqxftg)
hqxftg("asdf");
})
})
}
It does seem to work in jsfiddle for some reason.
It is because you have named the event parameter same as the function
function asdf() {
function hqxftg(stuff) {
alert(stuff);
}
$(document).ready(function () {
$('[name="name"]').keyup(function (event) {
alert(typeof hqxftg)
hqxftg("asdf");
})
})
}
The event callback keyup receives the event object as the first parameter, you are naming it as hqxftg which overrides the external scoped function name.
Also there is no need to use the onload="", you can just use the dom ready callback
jQuery(function ($) {
function hqxftg(stuff) {
alert(stuff);
}
$('[name="name"]').keyup(function (event) {
alert(typeof hqxftg)
hqxftg("asdf");
})
})
You are missing a couple of things...
1) You miss the ; at the end of calling foo()
2) You are missing tags to close the jQuery selector
When you try this it will work:
function foo(peram) {
alert(peram);
}
$("#someElement").keyup(function(alert) {
foo("You pressed a key!");
});
JSFiddle here...
Update: Post has been updated and original comment of mine becomes obsolete.
I would go with the comment of Derek.
I am able to reproduce the problem: JSFiddle
Is it correct you have also foo declared as a var?
Try this code.
HTML
<input id="someElement" />
Java script:
function foo(peram) {
alert(peram);
}
$( document ).ready(function() {
$("#someElement").keyup(function() {
foo("You pressed a key!");
});
});
Demo
<html>
<head>
<script>
function test(){
return function(){
alert("hi");
}
}
test();
</script>
</head>
<body>
</body>
</html>
This is my code, can I ask why it doesnt work properly??
Because you're returning your function but not invoking it.
Try this:
test()();
Here is a fiddle
I think you might be confused. test() returns a function reference, but it won't execute it.
You could do something like this
var alertFunc = test(); // return function reference
alertFunc(); // call the function
I created an AS3 script with a function
public function sayHello():String
{
return "Hello";
}
I have also registered the callback as follows
ExternalInterface.addCallback("sayHello", sayHello);
In my javascript, I have embedded the SWF file as follows
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("HelloWorld.swf", "HelloWorld", "1", "1", "9.0.0");
</script>
But when I try to call the sayHello method as follows
document.getElementById("HelloWorld").sayHello();
I am getting Uncaught TypeError: Cannot call method 'sayHello' of undefined
Any help will be appreciated!
If the swf isn't loaded yet then document.getElementById("HelloWorld") will return undefined hence your error. You can try if this is the case by calling that couple seconds later.
setTimeout(function() {
document.getElementById("HelloWorld").sayHello();
},5000);
I would also put that code inside a function that is called on body onload event ie.
...
<head>
<script>
function onload() {
setTimeout(function() {
document.getElementById("HelloWorld").sayHello();
},5000);
}
</script>
...
</head>
<body onload="onload()">
...
</body>
I'm trying to create a interval call to a function in jQuery, but it doesn't work! My first question is, can I mix common JavaScript with jQuery?
Should I use setInterval("test()",1000); or something like this:
var refreshId = setInterval(function(){
code...
}, 5000);
Where do I put the function that I call and how do I activate the interval? Is it a difference in how to declare a function in JavaScript compared to jQuery?
To write the best code, you "should" use the latter approach, with a function reference:
var refreshId = setInterval(function() {}, 5000);
or
function test() {}
var refreshId = setInterval(test, 5000);
but your approach of
function test() {}
var refreshId = setInterval("test()", 5000);
is basically valid, too (as long as test() is global).
Note that there is no such thing really as "in jQuery". You're still writing the Javascript language; you're just using some pre-made functions that are the jQuery library.
First of all: Yes you can mix jQuery with common JS :)
Best way to build up an intervall call of a function is to use setTimeout methode:
For example, if you have a function called test() and want to repeat it all 5 seconds, you could build it up like this:
function test(){
console.log('test called');
setTimeout(test, 5000);
}
Finally you have to trigger the function once:
$(document).ready(function(){
test();
});
This document ready function is called automatically, after all html is loaded.
I have written a custom code for setInterval function which can also help
let interval;
function startInterval(){
interval = setInterval(appendDateToBody, 1000);
console.log(interval);
}
function appendDateToBody() {
document.body.appendChild(
document.createTextNode(new Date() + " "));
}
function stopInterval() {
clearInterval(interval);
console.log(interval);
}
<!DOCTYPE html>
<html>
<head>
<title>setInterval</title>
</head>
<body>
<input type="button" value="Stop" onclick="stopInterval();" />
<input type="button" value="Start" onclick="startInterval();" />
</body>
</html>
jQuery is just a set of helpers/libraries written in Javascript. You can still use all Javascript features, so you can call whatever functions, also from inside jQuery callbacks.
So both possibilities should be okay.
setInterval(function() {
updatechat();
}, 2000);
function updatechat() {
alert('hello world');
}