悬停时显示图像（仅当悬停延迟2秒时）

Question

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

我正在尝试类似的事情：

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

但它并没有像预期的那样发挥作用。它在最初的2s悬停后继续切换。你会怎么做？

Answer 1

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

Answer 2

.delay（）也是一种很好的方式：

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