Why is setTimeout () with 0ms. affects my function
In my case on hover <div>
so add one element inside<div>
But in some div I want to hide the added element after hovering the element.
This is my code and it works!
HTML:
<div class="one">
<span class="content"></span>
</div>
<div class="two">
<span class="content"></span>
</div>
jQuery:
$("div.one > .content").on("hover" , function(){
var this_ = $(this);
this_.prev(".top").remove();
});
$("div.two > .content").on("hover" ,function(){
var this_ = $(this);
setTimeout(function(){this_.prev(".top").remove();})
});
.one
and .two
both are the same function. But I want to know why the second function affects usage setTimeout()
and the time is 0 milliseconds, Why is 0 millisecond affected in my function?
Demo: http://jsfiddle.net/nShCy/
It's not 0ms, 4ms delay .
The answer is simple: mouseenter fires on hover, so you are trying to remove an element that doesn't exist yet. With a 4ms break and a hover callback that finishes in less than 4ms, it works as expected.
$(function(){
$("div.one > .content").on("hover" , function(){
var this_ = $(this);
this_.prev(".top").remove();
});
$("div.two > .content").on("hover" ,function(){
var this_ = $(this);
setTimeout(function(){this_.prev(".top").remove();})
});
})