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

    前幾日在利用JQuery做菜單滑動標記這個效果的時候，最后發現滑動條在我用鼠標快速滑動的時候，會出現滑動條延遲滑動，並且有卡頓的現象,相當影響體驗感受。不完美～

在幾番詢問下，得到了一個延時處理的解決方案，完美解決了這個問題。

思路：

    在鼠標移入目標元素的時候，啟用定時操作，我目前設置的為1/10秒，也就是說，當鼠標如果在目標元素區域停留了滿足我預設值的時間范圍內的話，我就執行動畫效果，否則沒有達到預設值的時間范圍便移出來目標元素的話，便取消延時執行的操作。簡單的說，滿足定時條件執行，否則取消操作。

具體代碼：

HTML 部分：

<ul id="nav">
　<li><a href="#">menu1</a></li>
　<li><a href="#">menu2</a></li>
　<li><a href="#">menu3</a></li>
　<li><a href="#">menu4</a></li>
　<span id="slide_1" class="slidebar"></span>
</ul>

未添加延時操作的JS代碼：

 

 //導航菜單一監聽hover效果
$("#nav li a").mouseenter(function() {
      $("#slide_1").animate( {
            left : $(this).offset().left
      },200);
});

添加延時操作的JS代碼：

//加延遲處理的導航條2
var tId = null,ele;//時間ID，當前元素
$("#nav1 li a").mouseenter(function() {
    ele = $(this);
   //設置定時操作，並記錄時間ID，用於清除定時器
    tId = setTimeout(function() {
       $("#slide_2").animate({left:$(ele).offset().left});
    }, 100);
}).mouseout(function() {
       //當鼠標移出目標元素時，清除定時操作
        clearTimeout(tId);
});

Demo瀏覽地址：
http://xiaoweijs.duapp.com/demo/slidebar.html

總結

  有時候對於效果過於追求的我們，像遇到了卡頓這種情況，心里難免有些不完美的感覺。以上demo 和上面的那個例子只是延時處理的一種情況，其實在做很多導航滑動，向下滑動菜單效果，滾動條滑動等等效果的的時候我們經常會遇見，但是解決思路都是相同的。增加延遲處理，終止事件。注意到這里終止事件的關鍵點在於clearTimeout上，先記錄定時器Id,不滿足條件則clear掉。