jQuery settimeout（）無法正常工作

我一直在試圖擴大使用砌體。這個想法是，當用戶將鼠標懸停在一個盒子（div）上並等待該div 2秒鐘時，該腳本應該調用一個可以擴展div的函數。jQuery settimeout（）無法正常工作

它的全部工作除了腳本不等待2秒鐘，但立即執行該功能。我在尋找更多關於setTimeOut（）函數的信息。但我相信我已經正確實施了它。有人可以幫幫我嗎？

HTML：

<!DOCTYPE html> 
<html class=''> 
    <head> 
     <meta charset='UTF-8'> 
     <meta name="robots" content="noindex"> 
     <link rel="stylesheet" type="text/css" href="responsive_masonry.css" /> 
     <!-- <link rel="stylesheet" type="text/css" href="fluid_responsive_masonry.css" /> --> 
    </head> 
    <body> 
     <h1>Masonry - animate item size with jQuery</h1> 
     <div class="masonry"> 
      <!-- <div class="grid-sizer"></div> --> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
     </div> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
     <script src='http://masonry.desandro.com/masonry.pkgd.js'></script> 
     <script src="new_layout.js"></script> 
     <!-- <script src="layout.js"></script> --> 
    </body> 
</html>

JS：

var timer = 0; 
var delay = 2000; 

var $container = $('.masonry').masonry({ 
    columnWidth: 60 
}); 

$(function() { 
    $container.on('mouseenter', '.item-content', function() { 
     timer = setTimeout(ToggleExpansion($(this)), delay); 
    }); 

    $container.on('mouseleave', '.item-content', function() { 
     clearTimeout(timer); 
    }); 

    $container.on('click', '.item-content', function() { 
     if ($(this).parent('.item').hasClass('is-expanded')) { 
      ToggleExpansion ($(this)); 
     } 
     else { 
      $container.children().removeClass('is-expanded'); 
      ToggleExpansion ($(this)); 
     } 
    }); 


}); 

function ToggleExpansion (thisObj) { 
    if (!$(this).parent('.item').hasClass('is-expanded')) { 
     $container.children().removeClass('is-expanded'); 
     thisObj.parent('.item').toggleClass('is-expanded'); 
    } 

    $container.masonry(); 
}

CSS：

* { 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

body { 
    font-family: sans-serif; 
} 

.masonry { 
    background: #EEE; 
    max-width: 640px; 
} 

.masonry .item { 
    float: left; 
} 

/* item is invisible, but used for layout */ 
.item, 
.item-content, 
.grid-sizer { 
    width: 60px; 
    height: 60px; 
} 

.item { 
    border: none; 
    background: transparent; 
} 

/* item-content is visible, and transitions size */ 
.item-content { 
    width: 60px; 
    height: 60px; 
    background: #D26; 
    border: 2px solid #333; 
    border-color: hsla(0, 0%, 0%, 0.5); 
    border-radius: 5px; 
    -webkit-transition: width 0.4s, height 0.4s; 
     -moz-transition: width 0.4s, height 0.4s; 
     -o-transition: width 0.4s, height 0.4s; 
      transition: width 0.4s, height 0.4s; 
} 

.item:hover .item-content { 
    border-color: white; 
    background: #A2C; 
    cursor: pointer; 
} 

/* both item and item content change size */ 
.item.is-expanded, 
.item.is-expanded .item-content{ 
    width: 180px; 
    height: 120px; 
} 

.item.is-expanded { 
    z-index: 2; 
} 

.item.is-expanded .item-content { 
    background: #F90; 
}

來源

2014-08-27 RafS

*「jQuery settimeout（）不能正常工作」*'setTimeout'不是一個jQuery的東西。這是一個瀏覽器的東西。 – 2014-08-27 09:44:56

您將n EED做兩件事情：

總結你的計時器代碼的功能。
手柄this，因爲在事件處理this和this在定時器功能是不一樣的。

這既處理：

$container.on('mouseenter', '.item-content', function() { 
    var $this = $(this);    // Wrap element here, so we have a var 
              // to close over 
    timer = setTimeout(function() {  // Wrap your code in a function 
       ToggleExpansion($this); // Use the var the function closes over 
      }, delay); 
});

或使用ES5的Function#bind（這是shimmable在老引擎）：

$container.on('mouseenter', '.item-content', function() { 
    timer = setTimeout(ToggleExpansion.bind(null, $(this)), delay); 
});

或者使用jQuery的$.proxy：

$container.on('mouseenter', '.item-content', function() { 
    timer = setTimeout($.proxy(ToggleExpansion, null, $(this)), delay); 
});

來源

2014-08-27 09:46:17

這個伎倆！謝謝。我會嘗試其他的解決方案，它看起來更乾淨=） – RafS 2014-08-27 09:51:31

試試這個

$container.on('mouseenter', '.item-content', function() { 

     var _this = this; 

     timer = setTimeout(function() { 

         ToggleExpansion($(_this)) 

       }, delay); 
});

來源

2014-08-27 09:42:07

現在它已經等待了很長時間，但仍然沒有達到我的預期。擴展不會發生，也許是因爲$（this）不是我需要的div（「.item-content」）？ – RafS 2014-08-27 09:47:11

只是這樣做：

$container.on('mouseenter', '.item-content', function() { 
    var itemcontent = $(this); 
    timer = setTimeout(function() { 
     ToggleExpansion(itemcontent); 
    }, delay); 
});

來源

2014-08-27 09:49:38

的確，thanx的更正。儘管如此，在允許的3分鐘之間的答案 – 2014-08-27 09:52:49

jQuery settimeout（）無法正常工作

回答

相關問題