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（）无法正常工作

回答

相关问题