Question

我一直试图延长对砌体的使用。这个想法是当用户将鼠标悬停在一个盒子（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>

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

Answer 1

你需要做两件事：

将您的计时器代码包装在一个函数中。
处理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（可在旧引擎上使用）：

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

Answer 2

试试这个

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

        var _this = this;

        timer = setTimeout(function() {

                      ToggleExpansion($(_this)) 

               }, delay);
});

Answer 3

这样做：

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

jQuery settimeout（）无法正常工作

3 个答案: