Javascript 如何让用户在滑下前悬停两秒

我在下面有一个工作代码，它具有向下滑动功能，但我希望用户在向下滑动之前至少悬停2秒钟。如果用户未悬停2秒，则不应向下滑动

我尝试过延迟，但它仍然会触发，即使我已经10秒没有在链接上悬停

以下是我的代码和：

您需要（在代码中的注释旁边）为动态生成的元素使用

.on（）

方法

$(document).ready(function() {

   var timeo = null;

   $(".item-content").hide(); // Hide all!!!

    $("body").on("mouseenter", ".item-show", function() { // Use rather mouseenter!

        var $that = $(this);           // Store the `this` reference
        clearTimeout( timeo );         // Clear existent timeout on m.Enter 

        timeo = setTimeout(function(){  // Before setting a new one
            $that.hide().closest('p').next(".item-content").slideDown( "slow" );
        }, 2000);

    }).on("mouseleave", ".item-show", function(){   // mouse leaves? Clear the timeout again!
        clearTimeout( timeo );
    });  

    $(".close-icon").on("click", function() {
        var $itemB = $(this).closest(".item-b");
        $itemB.find(".item-content").slideUp();
        $itemB.find(".item-show").show();
    });

});

---

我将使用

setTimeout（）

和

clearTimeout（）

函数。像这样的方法应该会奏效：

var timer;

$("#data")
    .on("mouseover", ".item-show", function() {
        var el = $(this);
        timer = setTimeout(function() {
                el.closest('.item-b').find(".item-content").show('slidedown');
        }, 10000); })
    .on('mouseout', ".item-show", function() {
        clearTimeout(timer); });

编辑：在查看了您在评论中发布的JSFIDLE之后，您似乎还需要事件委派来完成这项工作。我已相应地更新了我的答案。（编辑的小提琴链接）

---

编辑2：我重新阅读了你的问题，我相信我现在明白了你的意图。请查看我更新的小提琴

setTimeout+clearTimeout+mouseout事件将完成此任务。请将setTimeout放在一边，说明Kevin B是正确的；确保您了解这对用户来说是多么糟糕的用户体验。10秒在用户界面上已经很长时间了，所以你最好有一个非常好的理由来使用它。是的，这是一个让用户快速离开你的页面，或者就“bug”与你联系的好方法。#Roko谢谢。。我刚把我的放在树上，它坏了。这是我的朋友ddlehttps://jsfiddle.net/dev2020/zsdgjsz7/2/@user244394修复了带有“m”的打字错误

Timeout

。您没有关闭演示中的括号：）添加后，您的所有内容都默认打开并且似乎已损坏：（@user244394更新了答案和演示。请现在尝试使用

.on（）

@vince.error.

“body”再次合并单击

只是动态委托的

的静态元素处理程序。item show

-仔细看：）@Venice-我试图将urs与我的示例合并到Fiddle fi中ddlehttps://jsfiddle.net/dev2020/zsdgjsz7/2/ 它不起作用：（@user244394编辑了我的答案，看到了你的JSFIDLE。

var timer;

$("#data")
    .on("mouseover", ".item-show", function() {
        var el = $(this);
        timer = setTimeout(function() {
                el.closest('.item-b').find(".item-content").show('slidedown');
        }, 10000); })
    .on('mouseout', ".item-show", function() {
        clearTimeout(timer); });