Delay Automatic Completion
Requirements: In the text input box, listening for user input, to achieve the function of automatic completion.
Disadvantages: Each user input a character, will produce an AJAX request, if the user entered a long string of content, the number of requests are many, in fact, the last time, is the user needs.
The code is similar to the example above.
Deferred scrolling
Requirements: page ads, users need to scroll to where to follow.
Disadvantage: User scrolling at the bottom, triggering the N times to let the ads reposition function. In fact, only when the user stops, only the trigger once is enough.
The code is similar to 1.
var changetab = function () {
var Timeid = 0;
return function (tabid) {
if (Timeid) {
Cleartimeout (Timeid);
Timeid=0;
}
settimeout (function () {
Ajax do Something
},500);
};
}();
Look at a complete example
<%@ page language= "C #" autoeventwireup= "true" codebehind= "settimeout.asp tutorial X.cs" inherits= "web effects. settimeout"%>
<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/ Xhtml1-transitional.dtd ">
<title></title>
<style type= "Text/css Tutorial" >
#flyout
{
Border:solid 2px Gray;
Background-color: #fff999;
width:300px;
height:100px;
Display:none;
}
</style>
<script type= "Text/javascript" >
var Flyouttimer;
function Mouseo Tutorial utevent () {
Hide flyout after 1 second then the mouse move out of the flyout zone
Flyouttimer = settimeout (hideflyout, 1000);
}
function Mouseoverevent () {
Clear the timer when the mouse move over the flyout
Cleartimeout (Flyouttimer);
}
function Hideflyout () {
document.getElementById ("flyout"). Style.display = "None";
}
function Showflyout () {
document.getElementById ("flyout"). Style.display = "block";
Mouseoutevent ();
}
</script>
<body>
<form id= "Form1" runat= "Server" >
<div onclick= "showflyout ()" >
Click me to show flyout</div>
<div id= "flyout" onmouseout= "mouseoutevent ()" onmouseover= "Mouseoverevent ()" >
This is a flyout
</div>
</form>
</body>