Javascript 仅当我在1秒后将鼠标悬停在li上时，才在悬停时显示弹出窗口

我试着在li上显示hover上的内部div。我正在做fadeIn和fadeOut效果，但问题是当我在所有li fadeIn效果上快速悬停时，所有人都可以使用fadeIn效果。当我在li上停留1秒时，它应该显示，如果我在1秒前离开该元素，它不应该显示fadein效果

<script type="text/javascript">
    $(document).ready(function(){

       var _changeInterval = null;
        $( ".badge_icon" ).hover(function() {
             clearInterval(_changeInterval)

             _changeInterval = setInterval(function() {
                $(this).find(".badges_hover_state").fadeIn(500);
            }, 1000);

        },function() {

             $(this).find('.badges_hover_state').fadeOut(500);

        }); 
      });
</script>

$（文档）.ready（函数（）{
var _changeInterval=null；
$（“.badge_图标”）.hover（函数（）{
clearInterval（_changeInterval）
_changeInterval=setInterval（函数（）{
$（这个）.find（“.badges\u hover\u state”）.fadeIn（500）；
}, 1000);
}，函数（）{
$（此）.find（'.徽章\悬停\状态'）.fadeOut（500）；
}); 
});

---

我也尝试过使用stop（）、delay（），但没有成功。最后我尝试使用时间间隔，但现在我的代码已经停止工作

您可以使用以下jquery脚本：

var myTimeout;
$('#div').mouseenter(function() {
    myTimeout = setTimeout(function() {
        //Do stuff
    }, 1000);
}).mouseleave(function() {
    clearTimeout(myTimeout);
});

---

请参见

通过在变量名前面添加窗口，我们能够解决此问题

var myTimeout;

    $('.div').mouseenter(function() {
      window.el = $(this);
        myTimeout = setTimeout(function() {
           el.css("width","200px");
        }, 1000);
    }).mouseleave(function() {
        clearTimeout(myTimeout);
        el.css("width","100px");
    });

---

我已经做了一些改变，现在它停止工作，你能告诉我现在的问题，你给我发送我的演示链接。。。将您的更改发送给我我已将此代码添加到我的网站。没有超时fadein在有超时的情况下工作。。