JSFiddle - React, Tailwind, and code Playground

by kosmos

HTML

<p id="text-box1">text box 1</p>

JavaScript

$(function(){
    var to;
    var $tb1 = $('#text-box1');
    
    $tb1.on('mouseenter', function(){
        if( to !== undefined ) return;
        var $this = $(this);
        to = setTimeout(function(){
            $this.text('The text changed!');
            to = undefined;
        }, 500);
        
    }).on('mouseleave', function(){
        if( to !== undefined ) return;
        var $this = $(this);
        to = setTimeout(function(){
            $this.text('The previous Text');
            to = undefined;
        }, 500);
    });
    
    //$('#text-box1').hover(function() {
    //    $('#text-box1').text("The text changed!");
    //},function(){
    //    $('#text-box1').text("The previous Text");
    //});
});