製做滑動條菜單，如何延時處理滑動效果，避免動畫卡頓

    前幾日在利用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掉。