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); 
    });