jq的hover事件连续触发

问题描述：

比如：连续多次来回滑动鼠标就会这样,

代码结构：

1
2
3
4
5
$('ele').hover(function(){
    $(this).css();
},function(){
    $(this).css();
});

解决方案：

当鼠标放置在li上面时超过一定时间再执行hover事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var t;
$("li.subnav-bord").mouseenter(function(){
  var that = this;
  t = setTimeout(function(){
    var pid = $(that).attr("data");
    $(that).addClass("subnav-li-active");
    $(that).find('.subnav-li-pad').addClass('subnav-li-pad-active');
    /*二级分类*/
    $.ajax({
      url:'url',
      type:'get',
      data:{
        "pid":pid
      },
      dataType:'json',
      success:function(result){
        var html = '';
        var data = result.data;
        if(data.length > 0 ){
          for(var o in data){
              html += '<li><a href="/Book/books?id='+data[o]["id"]+'">'+data[o]["kind_name"]+'</a></li>'
          }
          document.getElementById("secondCat"+pid).innerHTML = html;
          $("#secondCat"+pid).parent().css("display","block");
        }
      },
      error:function(error){console.log(error);}
    })
  },100);
}).mouseleave(function(){
  clearTimeout(t);
  $(this).removeClass('subnav-li-active');
  $(this).find('.subnav-li-pad').removeClass('subnav-li-pad-active');
  $(this).find('.subnav-li-child').css('display','none');
});
【JS库】, jQuery