点击时，会触发mouseleave吗？

Question

window.onload = function() {
  $(".compartir").hover(function() {
    console.log('hover');
    var self = this;
    setTimeout($(self).addClass('ready'), 500);
  }, function() {
    var self = this;
    console.log('leave');
    setTimeout($(self).removeClass('ready'), 5000);
  });
  $(".compartir a").on('click', function(e) {
    if (!$(this).parents('.compartir').is('.ready')) {
      console.log('!ready');
      e.preventDefault();
    } else {
      console.log('ready');
    }
  });
};

.compartir {
  position: relative;
  height: 40px;
}
.compartir_box .social,
.compartir_box .showSocial {
  position: absolute;
  left: 0;
  top: 0;
  transition: 0.25s linear all;
}
.compartir_box .social {
  opacity: 0;
}
.compartir_box:hover .showSocial {
  opacity: 0;
}
.compartir_box:hover .social {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="compartir_box">
  <div class="compartir">
    <span class="showSocial">COMPARTIR</span>
    <div class="social">
      <a target="_blank" href="https://www.facebook.com/">facebook</a>
      <a target="_blank" href="https://www.facebook.com/">twitter</a>

    </div>
  </div>
</div>

我想要等到选项可见，因为在移动设备上，悬停也是一个标签，它会立即启动链接（用户不知道哪个选项......）（这就是为什么我包含了现成的类）

问题是似乎在onclick上删除了ready类（没有延迟）

你知道任何解决方法吗？

PD：我不知道为什么但是jquery没有在片段中定义，即使我包含了jQuery ......：s

Answer 1

1. 使用匿名函数在超时时执行
2. 保存稍后要使用的对象。我更喜欢保存jQuery对象
3. 如果需要，清除超时

var tId;
$(function() {
  $(".compartir").hover(function() {
    console.log('hover');
    var $self = $(this);
    clearTimeout(tId);
    tId=setTimeout(function() { $self.addClass('ready')}, 500);
  }, function() {
    var $self = $(this);
    console.log('leave');
    clearTimeout(tId);
    tId=setTimeout(function() { $self.removeClass('ready')}, 5000);
  });
  $(".compartir a").on('click', function(e) {
    if (!$(this).parents('.compartir').hasClass('ready')) {
      console.log('!ready');
      e.preventDefault();
    } else {
      console.log('ready');
    }
  });
});

.compartir {
  position: relative;
  height: 40px;
}
.compartir_box .social,
.compartir_box .showSocial {
  position: absolute;
  left: 0;
  top: 0;
  transition: 0.25s linear all;
}
.compartir_box .social {
  opacity: 0;
}
.compartir_box:hover .showSocial {
  opacity: 0;
}
.compartir_box:hover .social {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="compartir_box">
  <div class="compartir">
    <span class="showSocial">COMPARTIR</span>
    <div class="social">
      <a target="_blank" href="https://www.facebook.com/">facebook</a>
      <a target="_blank" href="https://www.facebook.com/">twitter</a>

    </div>
  </div>
</div>