javascript - 如何延迟 toggleClass 事件以防止垃圾邮件更改？

Question

我使用了 jQueryUI toggleClass 延迟函数，但是我意识到它在事件发生之前创建了一个延迟，而不是在它可以再次被激活之前设置一个时间。

我有几个 DIV，当它们悬停在上面时使用 toggleClass 方法在类之间切换。但是，如果光标快速移动到它们上方，它们就会不断交换，看起来有问题。我想通过允许切换仅每 1 秒左右发生一次来防止这种情况。

这可能吗？

    $(".landingImage").hover(function () {
            var curHeight = this.clientHeight;
            $(this).siblings('.imageCover').css("height", curHeight / 1.25);
            $(".leftLanding").toggleClass("extraMargin");
            $(".rightLanding").toggleClass("extraMargin");
            $(this).siblings(".imageCenter").fadeOut(50);
        }, function () {
            $(this).siblings('.imageCover').css("height", "0px");
            $(this).siblings(".imageCenter").fadeIn(600);
    });

    #landing-images {
        position: relative;
        width: 100%;
        height: auto;
        overflow: auto;
        margin-top: 6%;
        margin-bottom: 5%;
    }
    
    .leftLanding {
        display: flex;
        position: relative;
        width: 85%;
        margin-left: 3%;
        cursor: pointer;
        transition: all 0.5s ease;
    }
    
    .rightLanding {
        display: flex;
        position: relative;
        width: 85%;
        margin-right: 3%;
        cursor: pointer;
        transition: all 0.5s ease;
    }
    
    .extraMargin {
        margin-left: 12%;
        margin-right: 12%;
    }
    
    .landingImage {
        position: relative;
        display: block;
        width: 100%;
        height: auto;
        z-index: 90;
        transition: all 0.5s ease;
    }

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="landing-images">
        <a href="menu.html"><div class="leftLanding left">
            <div class="imageCover">
            </div>
            <div class="imageCenter">
                
            </div>
            <img class="landingImage" src="assets/landingIMG1.png">
        </div></a>
        <a href="contact.html"><div class="rightLanding right">
            <div class="imageCover">
            </div>
            <div class="imageCenter">
               
            </div>
            <img class="landingImage" src="assets/landingIMG3.png">
        </div></a>
        <a href="burritos.html"><div class="leftLanding left">
            <div class="imageCover">
            </div>
            <div class="imageCenter">
           
            </div>
            <img class="landingImage" src="assets/landingIMG2.png">
        </div></a>
    </div>

Answer 1

如果您想有条件地延迟 hover 事件，您可以使用 window.setTimeout 延迟操作。

这个想法是你 - 将更改设置为稍等片刻 - 设置鼠标移开行为以取消挂起的更改。

这段代码会做类似的事情:

var delay;
$(".landingImage").hover(function () {
    window.setTimeout(doit,250);    //   queue action
}, function () {
    cancel();   //  clear hover, if still pending
    $(this).siblings('.imageCover').css("height", "0px");
    $(this).siblings(".imageCenter").fadeIn(600);
});

function doit() {
    var $landingImage=$(".landingImage");
    var curHeight = $landingImage.clientHeight;
    $landingImage.siblings('.imageCover').css("height", curHeight / 1.25);
    $(".leftLanding").toggleClass("extraMargin");
    $(".rightLanding").toggleClass("extraMargin");
    $landingImage.siblings(".imageCenter").fadeOut(50);

    delay=undefined;
}
function cancel() {
    if(delay) delay=window.clearTimeout(delay);
}

因为setTimeout是一个window方法，this不再有效。在这里，我为原始元素设置了一个变量。我通常使用 $ 作为 jQuery 变量的前缀，但这只是个人喜好问题。

当然，我还没有在您的环境中进行测试。

关于使用 CSS 方式:

如果您想避免即时更改，您可以将以下内容添加到您的 CSS:

transition-delay: .25s;

或者任何适合你的。

transition-delay 也可以与一般的 transition 属性结合使用(放在最后)，但先试试看它是如何工作的。