cleartimeout elimination of flashing instance code _javascript tips

Definitions and usage

The Cleartimeout () method cancels the timeout set by the settimeout () method.

Grammar

Cleartimeout (Id_of_settimeout)

Parameters	Description
Id_of_settimeout	The ID value returned by settimeout (). This value identifies the block of deferred execution code to be canceled.

Requirements: When the mouse is placed above the parent menu, display the submenu below. When the mouse is removed from the submenu or the parent menu, the submenu is put away. The final effect is as follows:

PS: This demand is very common, the most common practice is the LI element and then nested a UL element to contain child elements. This approach can be completely controlled with CSS. But today this submenu is separate from the navigation bar. That is, when the mouse to the top of the product display Header-tags block.

 <ul class= "Header-nav" > <li class= "Nav-item Home" ><a href= "@Url. Action (" Index ", Home") "> Homepage </a></li> <li class=" Nav-item products "id=" Header_tags "> <a href=" # "> Products <span class= "Icon-caret-down" ></span></a> ... </li> </ul> <div class= " Header-tags "> <ul> <li>  < IMG class= "Screening-img-hover" src= "~/content/static/all1.png" > <p> all </p> </li> <li tagid= " 4 ">   <p> sofa </p> </li> <li tagid=" 3 ">   <p> seat </p> </li> ... </div> 

This cannot be fully controlled with CSS (hover can only control child elements or sibling elements).

/* Father
/son/#a: hover #b {Display:block}/ 
* Brother * *

The above situation is going to be scripted. This involves the migration of #header_tags and. Header-tags two elements. When the mouse moves into the #header_tags,.header-tags display, when the mouse moves into the. Header-tags can not immediately trigger the #header_tags Moveout event, but to keep tags continue to display. Only to the mouse from the #header_tags and the. Header-tags after leaving did not re-enter the menu will be collected.

$ (function () {
var tagstime;
$ (document). On (' MouseOver mouseout ', ' #header_tags ', function (event) {
var $headerTagsBox = $ ('. Header-tags ');
if (Event.type = = ' MouseOver ') {
cleartimeout (tagstime);
$headerTagsBox. Slidedown (+);
else if (Event.type = = ' Mouseout ') {
tagstime = settimeout (function () {
$headerTagsBox. slideup)
, );
}
)
; $ ('. Header-tags '). Hover (function () {
cleartimeout (tagstime);
},function () {
var $me = $ (this);
Tagstime = settimeout (function () {
$me. slideup);}
);

If the timer is not cleared and the delay is performed, the navigation bar will flicker continuously. cannot be clicked at all.