制做滑动条菜单，如何延时处理滑动效果，避免动画卡顿

    前几日在利用JQuery作菜单滑动标记这个效果的时候，最后发现滑动条在我用鼠标快速滑动的时候，会出现滑动条延迟滑动，而且有卡顿的现象,至关影响体验感觉。不完美～

在几番询问下，获得了一个延时处理的解决方案，完美解决了这个问题。

思路：

    在鼠标移入目标元素的时候，启用定时操做，我目前设置的为1/10秒，也就是说，当鼠标若是在目标元素区域停留了知足我预设值的时间范围内的话，我就执行动画效果，不然没有达到预设值的时间范围便移出来目标元素的话，便取消延时执行的操做。简单的说，知足定时条件执行，不然取消操做。

具体代码：

HTML 部分：

   1:  <ul id="nav"> 

   2:  　<li><a href="#">menu1</a></li>

   3:  　<li><a href="#">menu2</a></li>

   4:  　<li><a href="#">menu3</a></li>

   5:  　<li><a href="#">menu4</a></li>

   6:  　<span id="slide_1" class="slidebar"></span>

   7:  </ul>

未添加延时操做的JS代码：

 

   1:   

   2:   //导航菜单一监听hover效果

   3:  $("#nav li a").mouseenter(function() {

   4:        $("#slide_1").animate( {

   5:              left : $(this).offset().left

   6:        },200);

   7:  });

添加延时操做的JS代码：

   1:  //加延迟处理的导航条2

   2:  var tId = null,ele;//时间ID，当前元素

   3:  $("#nav1 li a").mouseenter(function() {

   4:      ele = $(this);

   5:     //设置定时操做，并记录时间ID，用于清除定时器

   6:      tId = setTimeout(function() {

   7:         $("#slide_2").animate({left:$(ele).offset().left});

   8:      }, 100);

   9:  }).mouseout(function() {

  10:         //当鼠标移出目标元素时，清除定时操做

  11:          clearTimeout(tId);

  12:  });

Demo浏览地址：

http://xiaoweijs.duapp.com/demo/slidebar.html

总结

  有时候对于效果过于追求的咱们，像遇到了卡顿这种状况，内心不免有些不完美的感受。以上demo 和上面的那个例子只是延时处理的一种状况，其实在作不少导航滑动，向下滑动菜单效果，滚动条滑动等等效果的的时候咱们常常会碰见，可是解决思路都是相同的。增长延迟处理，终止事件。注意到这里终止事件的关键点在于clearTimeout上，先记录定时器Id,不知足条件则clear掉。