setTimeout处理jquery事件的延迟响应

     由于工作关系最近比较关注jquery，发现jquery真的是非常灵活方便！十分节省代码，大大提高了效率！！
     不过方便是方便，却也不是十分完美，或者说用起来也是需要技巧的！下面就说一个最近发现并刚刚解决的问题，希望能给和我一样刚接触jquery的菜鸟带来帮助！

     下面直接上代码：

document.ready(function(){

//chanle_1 打开

$(".chanle_1").mouseenter(function(){

$(".listDown").slideDown("fast");

});

//chanle_1关闭

$(".chanle_1").mouseleave(function(){

$(".listDown").slideUp("fast");

});

});

上面这段代码主要是想实现一个网页的顶部导航菜单特效：将鼠标放在其中一个频道上是向下滑出一个子栏目菜单，并从中选择进入子栏目。运行代码将鼠标放在"chanle_1"上时下方出现一个子栏目菜单（listDown_1），鼠标移出后下拉菜单收回;一开始没什么问题，可是无意中用鼠标反复快速滑过标题就会出现当鼠标已经彻底移出该区域后标题的下拉菜单还是反复上下滑动了一阵才结束。
开始以为是代码错误，后来仔细研究发现是由于鼠标滑动速度过快导致两个事件的响应跟不上鼠标的移动速度，在鼠标已经移出的情况下继续响应事件，直到完成。当时有两个思路：一是当其中有动画效果在执行时其他事件不响应；二是让事件延迟响应，也就是说当鼠标在div上停留一段时间后在开始响应，这样就避免了鼠标快速滑过时时间来不及响应。仔细考虑过后最后确定第二种最能达到我要的效果，也最符合实际操作的习惯。
js和jquery本身提供了几种延迟响应的方法，例如：使用delay()可以设置多个动画效果的响应队列；:not(:animated)判断是否有正在执行的动画；还有就是setTimeout来设置延迟。综合考虑只有setTimeout()最符合我想要的效果，而且适用范围也很广，使用起来也很简单！具体语法为：setTimeout(function(){},延迟响应时间)
      只需在事件中添加两行代码即可，修改后的代码如下：

<script>
$(document).ready(
function showDownList(){
 
 
  //频道1
 $(".chanle_1").mouseenter(function(){
  t=setTimeout(function(){                             //设置定时器
    $(".listDown_1").slideDown("fast");
   
   },450);                                      //设置延迟响应时间为450毫秒
 });
  
  $(".chanle_1").mouseleave(function(){
   clearTimeout(t);                            //清除定时器
  $(".listDown_1").slideUp("fast");
  
  });
  
  //频道2
 $(".chanle_2").mouseenter(function(){
  t=setTimeout(function(){
    $(".listDown_2").slideDown("fast");
   
   },450);
 });
  
  $(".chanle_2").mouseleave(function(){
   clearTimeout(t);
  $(".listDown_2").slideUp("fast");
  
  });
    
 });
</script>

再次运行代码，鼠标快速滑过div时没有响应，当鼠标在div上略作停顿后才触发事件，问题终于解决！