Javascript setTimeout setinterval

ArticleDirectory

• SetTimeout setinterval
• 14.1 use of setTimeout and setinterval

Javascript setTimeout setinterval

SetTimeout setinterval The basic structure of the Internet is based on a series of static states, which are generally called pages. From Chapter 2, we can see that DHTML breaks this model. To respond to user actions, DHTML creates many independent States on the same interface. This chapter will further explore this dynamic concept. With JavaScript, a web page can no longer be a collection of scattered States. With time and motion, you can create real dynamic pages. Objects can change over time, and can be smoothly moved on pages. Users can also operate on objects as they interact with things in real life. Currently, many operations are used in desktop applications.ProgramThese operations have been abused, such as dragging objects or sliding controls. These are examples of good desktop applications, but these operations have not yet been integrated into the web. In the following method, you can learn the basic steps involved in moving objects on the page, and then apply these basic knowledge to create a real-time interaction system, such as sliding controls and dragging interfaces. 14.1 use of setTimeout and setinterval Both methods can be used to execute JavaScript after a fixed period of time. However, they have different application scenarios. Method In fact, setTimeout and setinterval have the same syntax. Both of them have two parameters. One is to be executed.CodeString, and a time interval in milliseconds. After that time period, the code will be executed. However, there are differences between the two functions. After the setinterval code is executed, it automatically repeats the code after the fixed interval, setTimeout only executes the code once. Although it seems that setTimeout can only be applied to On-Off actions, you can create a function to repeatedly call setTimeout to implement repeated operations: File: settimeout_setinterval.js Showtime (); Function Showtime () { VaR today = new date (); Alert ("the time is:" + today. tostring ()); SetTimeout ("Showtime ()", 5000 ); } Once this function is called, the time is displayed every five seconds. If setinterval is used, the corresponding code is as follows: File: settimeout_setinterval2.js Setinterval ("Showtime ()", 5000 ); Function Showtime () { VaR today = new date (); Alert ("the time is:" + today. tostring ()); } The two methods may look very similar and show similar results, but the biggest difference between the two is that the setTimeout method does not execute the Showtime function every five seconds, it executes the Showtime function five seconds after each setTimeout call. This means that if the main part of the Showtime function needs to be executed in 2 seconds, the whole function will be executed every 7 seconds. While setinterval is not bound by the function called by itself, it simply repeats the function at a certain time. If you want to execute an action accurately after a fixed interval, you 'd better use setinterval. If you don't want to interfere with each other due to continuous calls, in particular, each function call requires heavy computing and a long processing time, so it is best to use setTimeout. Function pointer usage The first parameter in the two timing functions is a code string. In fact, this parameter can also be a function pointer, but ie 5 in Mac does not support this. If the function pointer is used as the second parameter of the setTimeout and setinterval functions, they can execute a function defined elsewhere: SetTimeout (Showtime, 500 ); Function Showtime () { VaR today = new date (); Alert ("the time is:" + today. tostring ()); } In addition, anonymous functions can also be declared as inline functions: SetTimeout (function () {var today = new date (); Alert ("the time is:" + today. tostring () ;}, 500 ); Discussion If the timer function is not processed, setinterval continues to execute the same code until the browser window is closed or the user switches to another page. However, there is still a way to terminate the execution of the setTimeout and setinterval functions. When the setinterval call is completed, it returns a timer ID, which can be used to access the timer in the future. If the ID is passed to clearinterval, you can terminate the execution of the called Process Code. The specific implementation is as follows: File: settimeout_setinterval3.js (excerpt) VaR intervalprocess = setinterval ("alert ('Goal! ') ", 3000 ); VaR stopgoallink = Document. getelementbyid ("stopgoallink "); Attacheventlistener (stopgoallink, "click", stopgoal, false ); Function stopgoal () { Clearinterval (intervalprocess ); } As long as you click stopgoallink, no matter when you click it, intervalprocess will be canceled and will not continue to execute intervalprocess repeatedly in the future. If setTimeout is canceled within the time-out period, the termination effect can also be implemented on setTimeout. The specific implementation is as follows: File: settimeout_setinterval4.js (excerpt) VaR timeoutprocess = setTimeout ("alert ('Goal! ') ", 3000 ); VaR stopgoallink = Document. getelementbyid ("stopgoallink "); Attacheventlistener (stopgoallink, "click", stopgoal, false ); Function stopgoal () { Cleartimeout (timeoutprocess );

 

Address: http://www.zhongsou.net/%E7%BD%91%E5%90%A7/news/8895387.html