JS延时判断，改善中国博客联盟展示导航自动点击的灵敏度

说到 JS 延时点击，度娘给出的结果几乎都是 js 的延迟点击 Demo，即鼠标产生一个 mousehover 事件之后，延迟多少秒执行点击动作。

本文主要分享一个带时间判断的 js 延时自动点击效果：当鼠标经过某页面元素，也就是产生一个 mousehover 事件时，触发 js 计时器，若经过指定时长后，鼠标还在这个元素上，将执行点击动作，否则计时器就清零，等待下一次的触发。

好了，说了一堆很费解的描述，一起来看下实际案例吧！

张戈研究这个 JS 特效的原因就是，博友 ijustplay 在我博客留言，说联盟的按钮太灵敏了，往往鼠标从浏览器标签页移动到联盟导航，想点击某个博客时，因为经过了导航的菜单，导致导航子页面的切换，体验不是很好。

JS延时判断，改善中国博客联盟展示导航自动点击的灵敏度

这个问题，其实我在前期加入自动点击功能的时候就已经发现了，但是一直也没去理他，既然有成员反馈了，张戈还是非常重视的，于是新一轮的折腾开始了。

在我同事的指点下，终于实现了这个带判断的延时点击效果。

以下是示例代码：

<div id="myid">
<!-- 要延时点击的对象 -->
</div>
<script type="text/javascript">
  $(function(){
  var timeId = 0;
  var flag = true;
  $("#myid").mouseover(function(e){  //双引号内的值是第1行中的id
    flag = true;
    var target = e.srcElement||e.target;
    var timeId = setTimeout(function(){
    if(flag){
      target.click();
    }
  },168);  //168表示当鼠标持续hover168毫秒才执行点击动作，否则重置计时。
}).mouseleave (function(){
  flag = false;
  clearTimeout(timeId);
  });
});
</script>

使用很简单，基本看注释就会用了，只要记得修改实际元素 ID，并在代码之前引入 Jquery.js 即可。

目前，此功能已经应用到中国博客联盟的成员导航以及首页的分类菜单上。

效果：拖动鼠标自然经过成员导航的菜单按钮，是不会产生点击动作的，只有停留在菜单按钮才会生成点击动作。

Ps：经多次实际测试才得出最佳延时时间 168ms：既不会因为鼠标不经意通过导致误点，也不会因为延迟太久，给人很迟钝的感觉，此问题完美解决！