Javascript jQuery settimeout（）工作不正常_Javascript_Jquery_Html_Settimeout_Jquery Masonry

Javascript jQuery settimeout（）工作不正常

javascript jquery html

Javascript jQuery settimeout（）工作不正常,javascript,jquery,html,settimeout,jquery-masonry,Javascript,Jquery,Html,Settimeout,Jquery Masonry,我一直在尝试扩大砖石的使用范围。其思想是，当用户将鼠标悬停在一个方框（div）上并等待该div 2秒钟时，脚本应该调用一个函数来扩展div 除了脚本不等待2秒，而是立即执行函数之外，所有这些都可以工作。我已经查找了有关setTimeOut（）函数的更多信息。但我相信我已经正确地实施了它。有人能帮我吗 HTML: <!DOCTYPE html> <html class=''> <head> <meta charset='UTF

我一直在尝试扩大砖石的使用范围。其思想是，当用户将鼠标悬停在一个方框（div）上并等待该div 2秒钟时，脚本应该调用一个函数来扩展div

除了脚本不等待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>

CSS:

试试这个

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

        var _this = this;

        timer = setTimeout(function() {

                      ToggleExpansion($(_this)) 

               }, delay);
});

你需要做两件事：

将计时器代码包装在函数中

处理

此

，因为事件处理程序中的

此

与计时器函数中的

此

不相同

这将处理以下两个方面：

$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（在较旧的发动机上可以使用垫片）：

或者使用jQuery的：

只要这样做：

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

“jQuery settimeout（）工作不正常”

settimeout

不是jQuery的事情。这是一个浏览器的东西。现在它等待的时间足够长了，但又不是我所期望的那样。扩展没有发生，可能是因为$（this）不是我需要的div（“.item content”），这就成功了！非常感谢。我也会尝试其他的解决方案，这样看起来更干净=）事实上，比x更适合修正。尽管如此，在允许的3分钟内回答

$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);
});

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

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

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