jQuery settimeout()이 올바르게 작동하지 않습니다.

저는 Masonry의 확장 된 사용을 시도했습니다. 사용자가 상자 (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

* "setTimeout'은 jQuery 일이 아닙니다. 그것은 브라우저의 것입니다. –

당신 시도 다음 두 가지 작업을 수행하십시오.

함수에 타이머 코드를 래핑하십시오.
핸들 , 이벤트 핸들러에 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의 (오래된 엔진에 shimmable입니다) Function#bind :

$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

는 N이

$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

그냥 이렇게하면 :

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

출처

2014-08-27 09:49:38

참으로 고쳐서 고맙다. 여전히 허용되는 3 분 사이의 답변 –

jQuery settimeout()이 올바르게 작동하지 않습니다.

답변

관련 문제