ClearTimeout, um flackernde Beispielcode_javascript-Fähigkeiten zu beseitigen

Definition und Verwendung

Die Methode „clearTimeout()“ kann das von der Methode „setTimeout()“ festgelegte Zeitlimit aufheben.

Grammatik

clearTimeout(id_of_settimeout)

参数	描述
id_of_settimeout	由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

Voraussetzung: Wenn die Maus auf dem übergeordneten Menü platziert wird, wird das Untermenü darunter angezeigt. Wenn sich die Maus vom Untermenü oder übergeordneten Menü wegbewegt, sollte das Untermenü ausgeblendet sein. Der endgültige Effekt ist wie folgt:

PS: Diese Anforderung kommt sehr häufig vor. Der häufigste Ansatz besteht darin, ein Ul-Element unter dem li-Element zu verschachteln, um die untergeordneten Elemente aufzunehmen. Dieser Ansatz kann vollständig mit CSS gesteuert werden. Aber heute sind dieses Untermenü und die Navigationsleiste getrennt. Das heißt, der Header-Tags-Block wird angezeigt, wenn sich die Maus über dem Produkt befindet.

<ul class="header-nav">
<li class="nav-item home"><a href="@Url.Action("Index", "Home")">首页</a></li>
<li class="nav-item products" id="header_tags">
<a href="#">产品<span class="icon-caret-down"></span></a>
....
</li>
</ul>
<div class="header-tags">
<ul>
<li>
<img  class="screening-img-normal lazy"  src="/static/imghwm/default1.png"  data-src="~/Content/static/all.png"  alt="ClearTimeout, um flackernde Beispielcode_javascript-Fähigkeiten zu beseitigen" >
<img  class="screening-img-hover lazy"  src="/static/imghwm/default1.png"  data-src="~/Content/static/all1.png"  alt="ClearTimeout, um flackernde Beispielcode_javascript-Fähigkeiten zu beseitigen" >
<p>全部</p>
</li>
<li tagid="4">
<img  class="screening-img-normal lazy"  src="/static/imghwm/default1.png"  data-src="~/Content/static/shafa.png"  alt="ClearTimeout, um flackernde Beispielcode_javascript-Fähigkeiten zu beseitigen" >
<img  class="screening-img-hover lazy"  src="/static/imghwm/default1.png"  data-src="~/Content/static/shafa1.png"  alt="ClearTimeout, um flackernde Beispielcode_javascript-Fähigkeiten zu beseitigen" >
<p>沙发</p>
</li>
<li tagid="3">
<img  class="screening-img-normal lazy"  src="/static/imghwm/default1.png"  data-src="~/Content/static/zuoyi.png"  alt="ClearTimeout, um flackernde Beispielcode_javascript-Fähigkeiten zu beseitigen" >
<img  class="screening-img-hover lazy"  src="/static/imghwm/default1.png"  data-src="~/Content/static/zuoyi1.png"  alt="ClearTimeout, um flackernde Beispielcode_javascript-Fähigkeiten zu beseitigen" >
<p>座椅</p>
</li>
....
</div> 

Dies kann nicht vollständig mit CSS gesteuert werden (Hover kann nur untergeordnete Elemente oder Geschwisterelemente steuern).

/*父子*/
#a:hover #b{display: block} 
/*兄弟*/
#a:hover + #b{display: block} 

Die obige Situation erfordert die Verwendung von Skripten. Dies beinhaltet das Ein- und Auswechseln der beiden Elemente #header_tags und .header-tags. Wenn sich die Maus in #header_tags bewegt, werden .header-tags angezeigt. Wenn sich die Maus in .header-tags bewegt, kann das Moveout-Ereignis von #header_tags nicht sofort ausgelöst werden, die Tags müssen jedoch weiterhin angezeigt werden. Das Untermenü wird erst geschlossen, wenn die Maus #header_tags und .header-tags verlässt und nicht wieder hineingeht.

$(function () {
var tagsTime;
$(document).on('mouseover mouseout', '#header_tags', function(event){
var $headerTagsBox = $('.header-tags');
if (event.type == 'mouseover') {
clearTimeout(tagsTime);
$headerTagsBox.slideDown(300);
}
else if (event.type == 'mouseout') {
tagsTime = setTimeout(function(){
$headerTagsBox.slideUp(200);
}, 200);
}
});
$('.header-tags').hover(function(){
clearTimeout(tagsTime);
},function(){
var $me = $(this);
tagsTime = setTimeout(function(){
$me.slideUp(200);
}, 200);
}); });

Wenn der Timer nicht gelöscht und keine verzögerte Ausführung hinzugefügt wird, blinkt die Navigationsleiste weiter. Kann überhaupt nicht klicken.