When writing H5 games, it is often necessary to use timed refresh pages to achieve animation effects. The more commonly used methods are setTimeout() and setInterval().
The setTimeout() method is used to call a function or calculate an expression after a specified number of milliseconds, while setInterval() is a Loops the function or expression every specified number of milliseconds until clearInterval clears it. That is to say, setTimeout() is only executed once, and setInterval() can be executed multiple times. The parameters of the two functions are also the same, the first parameter is the code or handle to execute, the second is the delay in milliseconds
setTimeout
Description
var timeoutID = window.setTimeout(code,millisec);
Click and drag to move the
timeoutID: The timer ID number, which can be used to clear the timer in the clearTimeout() function.
code: an executed code string or function
millisec: delay time, in milliseconds. If not specified, the default is 0.
The setTimeout() method is used to call the function or calculation expression after the specified number of milliseconds.
Note : During the calling process, you can use clearTimeout(id_of_settimeout) to terminate
window.setTimeout or setTimeout, the two writing methods are basically the same, except that window.setTimeout uses the setTimeout function as a property of the global window object to refer to
setTimeout(function timeout(){ console.log(Math.floor(Math.random()* 100 + 1)); },500)
Click and drag to move the
window.setTimeout method There are two ways to call a function:
function hello(){ console.log("hello"); } window.setTimeout(hello,500) ; //Cannot have parameters window.setTimeout("hello()",500); //Can have parameters
Click and drag to move
Neither window.setTimeout nor window.setInterval, when using the function name as the call handle With parameters, and in many cases, parameters must be taken, which requires a solution. For example, for function hello(_name), it is used to display welcome message for username: var userName="jack";
function hello(_name){ alert("hello,"+_name); //display welcome message based on username}
Click and drag to move
At this point , it is not feasible to attempt to delay the execution of the hello function by 3 seconds using the following statement:
window.setTimeout(hello(userName),3000);
click and drag to move
This will make the hello function execute immediately and pass the return value as the call handle to the setTimeout function, the result of which is not what the program needs. The desired result can be achieved using the string form:
window.setTimeout("hello(userName)",3000);
click and drag to move
If the demo execution is canceled before the delay expires, window.clearTimeout(timeoutId )method
function hello(){ alert("hello"); } var id=window.setTimeout(hello,5000); document.onclick=function(){ window.clearTimeout(id); }
click and drag to move
like this , if you want to cancel the display, just click any part of the page, the window.clearTimeout method is executed, so that the timeout operation is canceled.
In addition to the first two parameters, setTimeout also allows to add more parameters. They will be passed to the deferred function
setTimeout(function(a,b){ console.log(a+b); },1000,1,2); //3
Click and drag to move In the
above code, setTimeout There are 4 parameters in total. The last two parameters will be used as the parameters of the callback function when the callback function is executed after 1000 milliseconds.
IE versions below 9.0 only allow setTimeout to have two parameters. At this time, there are three solutions. The first is to customize setTimeout, and use the apply method to input parameters into the callback function; the second is to run the callback function with parameters in an anonymous function, and then enter the anonymous function into setTimeout; One way to use the bind method, bind the redundant parameters to the callback function, and generate a new function to input setTimeout
. In addition to the parameter problem, setTimeout has another point to pay attention to: the callback function whose execution is delayed by setTimeout is executed in the global environment. may be different from the context in which the function was defined
var x = 1; var o = { x: 2, y: function(){ console.log(this.x); } }; setTimeout(oy,1000); // 1
Click and drag to move The output of the
above code is 1, not 2, which means that the running environment of the callback function has become the global environment. Let
's look at an example that is not easy to find errors
function User(login) { this.login = login; this.sayHi = function() { console.log(this.login); } } var user = new User('John'); setTimeout(user.sayHi, 1000); //undefined
click and drag to move
The above code will only display undefined, because when user.sayHi is executed, it is executed in the global object, so this.login cannot get the value. To prevent this problem, a workaround is to put user.sayHi in a function to execute
http://click.aliyun.com/m/24032/