javascript - 悬停时显示图像(仅当悬停延迟2秒时)

基本上，我希望我的用户能够在我的博客中悬停帖子标题，如果他们将标题悬停2秒钟，则图像将显示。

我正在尝试类似的东西:

$('#post1').hover(function() {
  setInterval(function() {
    $('#img1').toggle();
  }, 2000);
});

但它没有按预期工作。最初的2s悬停后，它会继续切换。你会怎么做？

最佳答案

var timeoutId;
$("#post1").hover(function() {
    if (!timeoutId) {
        timeoutId = window.setTimeout(function() {
            timeoutId = null;
            $("#img1").toggle();
       }, 2000);
    }
},
function () {
    if (timeoutId) {
        window.clearTimeout(timeoutId);
        timeoutId = null;
    }
    else {
       $("#img1").toggle();
    }
});

这是一些工作代码和一个jsfiddle to prove it works