Zeitverzögerung in Javascript in einer Switch-Div-Funktion

Question

Ich bin relativ neu in Javascript. Ich habe kürzlich diese switch div function auf Schwebeflug gefunden. Ich habe den folgenden Code ebenfalls eingefügt. Ich versuche, eine Zeitverzögerung einzufügen, die auftritt, nachdem die Maus aus dem Div entfernt wurde. Damit es nicht sofort wieder in den Originaltext zurückkehrt. Wie würde ich das machen? Ich denke, ich muss setTimeOut() verwenden, aber ich habe keine Möglichkeit gefunden, es erfolgreich zu implementieren.

$('.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

Sie können setTimeout verwenden, um eine Funktion verzögert auszuführen. Vergessen Sie nicht, das Intervall zu speichern, damit Sie beim Schweben keine seltsamen Geräusche bekommen.

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

Versuchen Sie es mit 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

In setTimeout dieses Timeout-Objekt ist dies der. Das ist, warum ist es nicht funktioniert

$('.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); 
    });