解决鼠标mouseenter和mouseleave来回闪烁问题

1. 写久了UI组件封装的web项目，再去写常规的无UI组件的后台管理系统，真是添砖加瓦都得自己写。
   在实际运用中，鼠标事件会有很多的触发异常效果在里面，比如今天要说的鼠标经过、移开事件，我习惯用mouseenter 和
   mouseleave这两个。

2.在下面这段html代码中需求时，当鼠标经过该div service-status后，出现一段消息信息框。

 <div class="service-status"  @mouseenter="enter(index)" @mouseleave="leave()">
         <div class="service-badge" :class="item.health==='DOWN'?'badge-red':item.health==='WARNING'?'badge-yellow':'badge-green'">
         </div>
</div>

这里对闪烁问题进行了减缓，即点击穿透时出现对闪烁再经过延迟后不会这么明显了

 enter = function (param_index) {
       $(".service-hover").finish();
          setTimeout(function () {
              $("#service-hover"+param_index).addClass("display");
          },300);

      };
   leave = function () {
         setTimeout(function () {
             $(".service-hover").finish().removeClass('display');

         },500);
     };