jquery uses settimeout to implement the Tab tab move delay effect

There is a scenario where you do not need to trigger an immediate switch when you are doing a mouse sliding tab, because you want to prevent the user from inadvertently moving across, or too often across the tab,
In particular, when switching to a tab with an asynchronous request, you should prevent too frequent switching or unconscious switching to avoid wasting resources.
Here's an example:

The code is as follows

Copy Code

Css: . f_l {Float:left} . tab-toggle { border:1px solid #000; width:225px; margin:100px Auto; } . tab-content { padding:10px; } UL { List-style:none; Background-color: #fff; margin:0; padding:0; } UL li{ background-color:red; Cursor:pointer; margin:0 5px; padding:5px; Color: #fff; font-size:14px; font-family: ' Microsoft Ya-hei '; } UL Li.current { Background-color:green; Color: #000; } Html: <div class= "Tab-toggle" > <ul> <li class= "f_l current" > click 1</li> <li class= "f_l" > Click 2</li> <li class= "f_l" > Click 3</li> <li class= "f_l" > Click 4</li> <div style= "Clear:both;" ></div> </ul> <div class= "Tab-content" > Content Area 1 </div> </div>

Js:
Generally do not do special handling of the mouse sliding toggle tab When you may write this:

The code is as follows	Copy Code
$ (function () { var $tab _toggle = $ ('. Tab-toggle '), $lis = $ (' li ', $tab _toggle), $tab _content = $ ('. Tab-content ', $tab _toggle); $lis. On (' MouseOver ', function () { var $this = $ (this), i = $this. Index () +1; $this. addclass (' current '). Siblings (). Removeclass (' current '); $tab _content.html (' content area ' +i); }); })

The delay effect of the mouse sliding switch tab, to each mouse mouseover to add a timer, for the delay, every time the mouse mouseout
Turn off the timer:

The code is as follows

Copy Code

$ (function () { var $tab _toggle = $ ('. Tab-toggle '), $lis = $ (' li ', $tab _toggle), $tab _content = $ ('. Tab-content ', $tab _toggle) Timeid = null; $lis. On (' MouseOver ', function () { var $this = $ (this), i = $this. Index () +1; Timeid = settimeout (function () { $this. addclass (' current '). Siblings (). Removeclass (' current '); $tab _content.html (' content area ' +i); },200); }). On (' Mouseout ', function () { Cleartimeout (Timeid); }); })