ClearTimeout to eliminate flickering example code_javascript skills

Definition and usage

The clearTimeout() method can cancel the timeout set by the setTimeout() method.

Grammar

clearTimeout(id_of_settimeout)

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

Requirement: When the mouse is placed on the parent menu, the submenu below is displayed. When the mouse moves away from the submenu or parent menu, the submenu should be collapsed. The final effect is as follows:

PS: This requirement is very common. The most common approach is to nest an Ul element under the li element to contain the child elements. This approach can be fully controlled using css. But today this submenu and navigation bar are separate. That is, the header-tags block is displayed when the mouse is over the product.

<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" src="~/Content/static/all.png">
<img class="screening-img-hover" src="~/Content/static/all1.png">
<p>全部</p>
</li>
<li tagid="4">
<img class="screening-img-normal" src="~/Content/static/shafa.png">
<img class="screening-img-hover" src="~/Content/static/shafa1.png">
<p>沙发</p>
</li>
<li tagid="3">
<img class="screening-img-normal" src="~/Content/static/zuoyi.png">
<img class="screening-img-hover" src="~/Content/static/zuoyi1.png">
<p>座椅</p>
</li>
....
</div> 

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

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

The above situation requires the use of scripts. This involves moving in and out of the two elements #header_tags and .header-tags. When the mouse moves into #header_tags, .header-tags is displayed. When the mouse moves into .header-tags, the moveout event of #header_tags cannot be triggered immediately, but the tags must continue to be displayed. The submenu will be closed only after the mouse leaves #header_tags and .header-tags and does not enter again.

$(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);
}); });

If the timer is not cleared and delayed execution is not added, the navigation bar will keep flashing. Can't click at all.