The previous article explains the dynamic creation of nodes and the deletion of nodes, and this article explains how to do simple animations with setinterval and settimeout.
Grammar is window.settimeout (FN, delay), Window.setinterval (FN, delay)
FN can be a function name, or it can be an executed string, but note that if FN is a string that can be executed, and arguments such as Window.setinterval ("MyFunction (obj)", 1000) will probably throw an exception, this time, Usually you have to pass an object parameter, which I suggest to solve it, and it is also recommended to use Window.settimeout and window.setinterval in this way:
Window.setinterval (function () {
MyFunction (obj);},1000);
There is also a situation in a "class", that is, the implementation of this.myfunction (obj) How to achieve it?
function Jsclass () {};
Jsclass.prototype.init = function (obj) {
var self = this; Create a reference to this pointer
Window.setinterval (function (obj) {
Self.myfunction (obj);},1000);
};
jsclass.prototype.myFunction = function (obj) {
Todo
};
The global approach of DHTML SetInterval and settimeout, the so-called global, that is, in the window layer, a method that is not part of a DHTML DOM element, there are some differences, and there are many explanations on the web, that is, setinterval is a circular execution of a specified function , SetTimeout is performed only once. An exception to the point that belongs to the window level, can be in front without window, that can use Window.setinterval can also be used directly with setinterval.
They all return a numeric Timerid for the Cleaverinterval/cleartimeout method, which is returned from the setinterval/settimeout. If you are a friend of desktop applications, you can imagine this setinterval and settimeout as creating a thread, while Timerid is a thread ID, and the Cleaverinterval/cleartimeout method is to destroy the thread. Perhaps this can better understand these two methods.
(in specific applications, I am more driven to use settimeout.) )
To know the function of these two methods, first write a simple example:
The alert dialog box pops up one second later.
<script>
Window.settimeout (function () {
Alert ("Timeout example after 1 second");
},1000)
</script>
A function that creates a new div node every second
<script>
function Intervalexample () {
var div=document.createelement ("div");
div.innerhtml = "Tutorial of DHTML and JavaScript programming by Www.never-online.net";
Document.body.appendChild (DIV);
}
Window.setinterval (intervalexample,1000);
</script>
In practice, settimeout can have an alternative application, such as the DoEvents function in VB or the application.doevents () in a. NET Desktop program, which is asynchronous processing because DHTML does not have multiple threads , so this function in many cases is to give the user feel is not in suspended animation state, or to other programs follow the logic of the code to continue without blocking or skipping a section of code execution.
Give an example.
The next piece of code is not added settimeout. After running, the anchor point will immediately point to HASH2
<script>
Window.location.hash= "HASH1";
Window.location.hash= "Hash2";
</script>
This section is settimeout, the anchor point will point to hash1 in 3 seconds, and then point to Hash2 after 3 seconds.
<script>
var doeventsdelay = 0;
function DoEvents (FN) {
Window.settimeout (Fn,doeventsdelay);
doeventsdelay+=3000;
}
DoEvents (function () {
Window.location.hash= "HASH1";
doeventsdelay-=3000;
}
);
DoEvents (function () {
Window.location.hash= "Hash2";
doeventsdelay-=3000;
}
);
</script>
Let's do a practical example, such as a dynamic menu with a dynamic display tip.
First, here only to explain the SetTimeout method, setinterval Please see the code in the demo, but also to indicate a point (in this case, there is a more serious problem is not resolved, this question I will stay to later explain) is about the coordinates. For example, if you put the slidershow in the following code into a table, you may find some problems. :D
The idea is to get an element, a label relative to this element, and then do an animation based on a tip container,
The main use is the relative elements of the x,y coordinates, about the coordinates of some attribute meaning, see the following figure:
And the whole idea of the animation, see the figure below
Comment Code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > <ptm L xmlns= "http://www.w3.org/1999/xhtml" > <pead> <title> Slider show Demo-http://www.never-online . NET </title> <meta http-equiv= "Imagetoolbar" content= "no"/> <style "type= text/css" all "Title=" Default > * {font-family:trebuchet MS, Lucida Sans Unicode, Arial, Sans-serif; margin:0; } body {font-size:10pt; Text-align:center; }. slidershowbox {border:1px solid #333; Visibility:hidden; Position:absolute; Background-color: #eee; Overflow:hidden; width:250px; Text-align:left; }. slidershowcontent {padding:5px; } </style> <script type= "Text/javascript" >//<! [cdata[var slideractive = false; var slidertimer = null; function Effect_slidershow (Slideractid, Sliderboxid) {if (slideractive) return; slideractive=true;//is in the process of animating Medium var slideract = $ (Slideractid);//Get clicked element to get coordinates to animate var Sliderbox = $ (SLIDERBOXID);/Get Tip container var sliderheight = parseint (sliderBox.style.height) | | Sliderbox.offsetheight; Because we make tip containers invisible using CSS visible,//So you can get the height of the container, if you use display for none, you cannot get the height of the element. However, you can customize the height of the container var visibility = sliderbox.style.visibility;//container is visible var sliderspeed = 10; The speed of the animation, the smaller the value, the faster,//note that, in fact, the use of 10 is nearly the limit,//You can change this value to 0, in fact, and 10. Why so? Do a suspense first, also as a thought: D if (visibility== "visible") {//If the container is currently visible, this will perform the shutdown animation SLIDERBOX.STYLE.V isibility= "visible";//Set the container to visible sliderBox.style.top = slideract.offsettop+slideract.offsetheight+ "px";//the y-coordinate of the container = phase The y-coordinate of the element + the height of the relative element sliderBox.style.left = slideract.offsetleft+ "px";The container x coordinate is the same as the X coordinate of the relative element sliderBox.style.height = sliderheight+ "px";//The initial height of the animation is the original height of the tip container animateclose (); else {sliderbox.style.visibility= "visible";//Set the container to visible sliderBox.style.top = slideract. offsettop+slideract.offsetheight+ "px";//container's y-coordinate = relative element's y-coordinate + relative element sliderBox.style.left = slideract.offsetleft+ "px"; The container x coordinate is the same as the X coordinate of the relative element sliderBox.style.height = "1px";//The initial height of the animation is 1 pixel animateshow (); function Animateshow () {var h = parseint (sliderBox.style.height) | | 0;//gets the height of the container if (h>=sliderheight) {//If height > original height, then clears timeout and returns SliderBox.style.height = slid erheight+ ' px ';//The vessel is highly restored window.cleartimeout (Slidertimer); return slideractive=false; }//Container height +1 and recursive this display function sliderBox.style.height = h+1 + "px"; Slidertimer=window.settimeout (Animateshow, sliderspeed); }; function Animateclose () {var h = parseint (sliderBox.style.height) | | sliderheight;//gets the height of the container if (h<=1) {//If the height <1, then clears timeout and returns sliderBox.style.height = Sliderh eight+ ' px '//The container is highly restored, otherwise the original height of the container will be 1 pixels sliderbox.style.visibility= "hidden"; Window.cleartimeout (Slidertimer); return slideractive=false; }//Container height-1 and recursion this close function sliderBox.style.height = h-1 + "px"; Slidertimer=window.settimeout (Animateclose, sliderspeed); }; The function of this function is to get a reference to an element, the parameter can be either an element ID or an element object function $ (objid) {if (typeof (ObjID) = = "Object") return ObjID; return document.getElementById (ObjID); }; }; ]]> </script> </pead> <body id= "www.never-online.net" > <p> Slider Show Demo </p> <pr/> Click Show settimeout demo <div class= "SLIdershowbox "id=" Slidershowbox "> <div class=" slidershowcontent "> Slidershow tutorial of DHTML A nd JavaScript programming by Never-online, Never-online.net </div> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Do you think that many of the above examples are repetitive labor? Wouldn't it be better if we cut some? :D, it is true, the above JS code is nearly half of the repeat, here I do not optimize it, or leave you do some substantive work, reduce the above code redundancy.
