JavaScript中的切换div功能的时间延迟

Question

我对JavaScript比较新。我最近在悬停时发现了这个switch div function。我也插入了下面的代码。我试图插入鼠标已从div中删除后发生的时间延迟。以便它不会立即变回原始文本。我会如何去做这件事？我想我需要使用setTimeOut()，但我还没有想出一个成功实现它的方法。

$('.switch').hover(function() { 
 
     $(this).find('.avg_words').hide(); 
 
     $(this).find('.avg_num').show(); 
 
    }, function() { 
 
     $(this).find('.avg_num').hide(); 
 
     $(this).find('.avg_words').show(); 
 
});

.avg_num { 
 
\t display: none; 
 
}

<div class="switch"> 
 
<div class="avg_words float_left"> 
 
    A+ (hover to see score) 
 
</div> 
 
<div class="avg_num"> 
 
    AVG = 98.35% 
 
</div> 
 
</div>

Answer 1

您可以使用setTimeout来运行延迟的功能。不要忘记存储这个时间间隔，这样您就不会在悬停时发生奇怪的抖动。

var i; 
$('.switch').hover(function() { 
     clearInterval(i); 
     $(this).find('.avg_words').hide(); 
     $(this).find('.avg_num').show(); 
    }, function() { 
     clearInterval(i); 
     i = setTimeout(function() { 
      $(this).find('.avg_num').hide(); 
      $(this).find('.avg_words').show(); 
     }.bind(this), 500); 
}); 

Answer 2

尝试使用setTimeout：

$('.switch').hover(function() { 
    $(this).find('.avg_words').hide(); 
    $(this).find('.avg_num').show(); 
}, function() { 
    var _this = this; 
    setTimeout(function() { 
     $(_this).find('.avg_num').hide(); 
     $(_this).find('.avg_words').show(); 
    }, 1000); //delay in milliseconds, here 1s 
}); 

JSFiddle

Answer 3

在setTimeout这是超时对象的这一点。这就是为什么它不工作

$('.switch').hover(function() { 
     $(this).find('.avg_words').hide(); 
     $(this).find('.avg_num').show(); 
    }, function() { 
     var hoverObj = this; 
     setTimeout(function() { 
      $(hoverObj).find('.avg_num').hide(); 
      $(hoverObj).find('.avg_words').show(); 
     }, 1000); 
    });