hover事件延遲處理程式碼例項詳解

螞蟻小編發表於2017-04-14
事件

大多數情況下，網站的hover事件都沒有進行延遲處理。

但是有些時候延遲處理可以提高網站的效能。比如，我們看完第一個選項卡的內容之後，再去看第四個選項卡的內容，這個時候可能滑鼠會滑過第二個、第三個，於是這兩個選項卡的內容就有可能被展示，這並不是我們想要的，使用hover事件延遲處理可以有效解決此問題。先看一個沒有延遲效果的選項卡:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
}
body{
  font:12px Verdana, Geneva, sans-serif;
  color:#404040;
}
.tabs {
  margin:10px 0 0 20px;
  width:360px;
  position:relative;
  overflow:hidden;
  height:160px;
}
.tabs span {
  z-index:2;
  font-size:12px;
  border:1px solid #d5d5d5;
  width:95px;
  height:25px;
  line-height:25px;
  text-align:center;
  float:left;
  margin-right:5px;
  cursor:pointer;
}
span.active{
  background-color:#d5d5d5;
}
#tab-01, #tab-02, #tab-03{
  position:absolute;
  top:26px;
  left:0;
  width:338px;
  padding:10px;
  height:93px;
  border:1px solid #d5d5d5;
  z-index:1;
}
#tab-02, #tab-03{
  display:none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">  
$(document).ready(function () {  
  $('.tabs span').mouseover(function () {  
    $('.tabs div').hide();
    $(this)
      .siblings('span')
      .removeClass('active')
      .end()
      .addClass('active')
      .next('div')
      .show();
  });  
});  
</script>
</head>
<body>
<div class="tabs"> 
  <span class="active">螞蟻部落一</span>
  <div id="tab-01">螞蟻部落一</div>
  <span>螞蟻部落二</span>
  <div id="tab-02">螞蟻部落二</div>
  <span>螞蟻部落三</span>
  <div id="tab-03">螞蟻部落三</div>
</div>
</body>
</html>

上面的程式碼實現了普通的選項卡效果，當我們無意中滑過任何一個選項卡都會產生效果。

下面就看使用延遲技術改造上面的程式碼，如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
}
body{
  font:12px Verdana, Geneva, sans-serif;
  color:#404040;
}
.tabs {
  margin:10px 0 0 20px;
  width:360px;
  position:relative;
  overflow:hidden;
  height:160px;
}
.tabs span {
  z-index:2;
  font-size:12px;
  border:1px solid #d5d5d5;
  width:95px;
  height:25px;
  line-height:25px;
  text-align:center;
  float:left;
  margin-right:5px;
  cursor:pointer;
}
span.active{
  background-color:#d5d5d5;
}
#tab-01, #tab-02, #tab-03{
  position:absolute;
  top:26px;
  left:0;
  width:338px;
  padding:10px;
  height:93px;
  border:1px solid #d5d5d5;
  z-index:1;
}
#tab-02, #tab-03{
  display:none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">  
$(document).ready(function () {
  $.fn.hoverDelay = function (options) {
    var defaults = {
      hoverDuring: 200,
      hoverEvent: function () {
        $.noop();
      }
    };
    var sets = $.extend(defaults, options || {});
    var hoverTimer, outTimer;
    return $(this).each(function () {
      $(this).hover(function () {
        clearTimeout(hoverTimer);
        var _this = this;
        hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring,_this);
      });
    });
  }
  var done=function (_this) {
    $('.tabs div').hide();
    $(_this)
      .siblings('span')
      .removeClass('active')
      .end()
      .addClass('active')
      .next('div')
      .show();
  };
  $('.tabs span').hoverDelay({ hoverEvent: done });
});
</script>
</head>
<body>
<div class="tabs"> 
  <span class="active">螞蟻部落一</span>
  <div id="tab-01">螞蟻部落一</div>
  <span>螞蟻部落二</span>
  <div id="tab-02">螞蟻部落二</div>
  <span>螞蟻部落三</span>
  <div id="tab-03">螞蟻部落三</div>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.$(document).ready(function () {})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）. $.fn.hoverDelay = function (options) {}，為jquery例項物件自頂一個hoverDelay方法，此方法實現了延遲效果。

（3）.var defaults = {

  hoverDuring: 200,

  hoverEvent: function () {

    $.noop();

  }

}，此物件儲存的是一些預設引數值。

比如預設延遲時間，和hover事件處理函式。

（4）.var sets = $.extend(defaults, options || {})，和並自定義引數物件和預設物件，也就是說如果規定了自定義的引數則使用自定義的引數，否則使用預設引數。

（5）.var hoverTimer, outTimer，宣告兩個變數，後面會用到。

（6）.return $(this).each(function () {

  $(this).hover(function () {

    clearTimeout(hoverTimer);

    var _this = this;

    hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring,_this);

  });

})，前面加個return是為了實現鏈式呼叫。

$(this).each(function () {})，遍歷每一個匹配的元素。

並且為每一個匹配元祖註冊hover事件處理函式。

clearTimeout(hoverTimer)目的是為了停止前一將要執行的事件處理函式，這樣的話不會不出現當我們連續滑過多個選項卡，會依次執行的情況，只會執行最後一個選項卡的切換。

（7）.var _this = this，將當前this指向賦值給變數_this。

（8）.hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring,_this)，延遲執行事件處理函式。

（9）.var done=function (_this) {

  $('.tabs div').hide();

  $(_this)

    .siblings('span')

    .removeClass('active')

    .end()

    .addClass('active')

    .next('div')

    .show();

}，事件處理函式，裡面是非常簡單的處理。

二.相關閱讀:

（1）.$.fn可以參閱$.fn作用簡單介紹一章節。

（2）.$.extend()可以參閱jQuery.extend()一章節。

（3）.each()可以參閱jQuery each()一章節。

（4）.hover()可以參閱jQuery hover事件一章節。

（5）.clearTimeout()可以參閱clearTimeout()一章節。

（6）.setTimeout()函式可以參閱setTimeout()一章節。

（7）.siblings()可以參閱jQuery siblings()一章節。

（8）.removeClass()可以參閱jQuery removeClass()一章節。

（9）.end()可以參閱jQuery end()一章節。

（10）.next()可以參閱jQuery next()一章節。

相關文章