Add delay/timeout to a . Hover()

Question

Hello, I have a function. Where I would like that in the second instance (mouseleave) a delay occurs so that what is within the function occurs, I have already tried to set within the second function a setTimeout, I have tried to reference inside the . Hover, ". Hover(Function(){}, setTimeout(Function(){});), but still did not achieve an effective result. Function below:

    $("#lista-interface").on("mouseover", ".tarefas", function(){
        $(this).hover(function(){
            let divO = document.createElement("div");
            $(divO).attr({"class":("button" + " left"),});
            let divT = document.createElement("div");
            $(divT).attr({"class":("button" + " rigth"),});
            let divTR = document.createElement("div");
            $(divTR).attr({"class":("button" + " delete"),});
            $(this).append(divO);
            $(this).append(divT);
            $(this).append(divTR);
        }, function(){

            $("div").remove(".button, .left");
            $("div").remove(".button, .rigth");
            $("div").remove(".button, .delete");
            set
        });
    });

any idea how that could be an effect, or if there was some other way that I could achieve the same effect.

Answer 1

Placing an event inside the other is not good practice because calling the first will create multiple listeners of the second. For example, when calling mouseover, will create multiple .hover(), that is, when you call the mouseover for the second time, will fire the .hover() 2 times, and so consecutively.

To resolve the delay issue, you include the code of the second function in the setTimeout:

setTimeout(function(){
   $("div").remove(".button, .left");
   $("div").remove(".button, .rigth");
   $("div").remove(".button, .delete");
}, 2000); // executa após 2 segundos

Regarding the problem described at the beginning, I would suggest not using .hover(). You can use the two events of .hover() so that it works even if the elements do not already have in the DOM, just use a if...else verifying which event was fired:

$(document).on("mouseenter mouseleave", "#lista-interface .tarefas", function(event){

     if(event.type == "mouseenter"){
         let divO = document.createElement("div");
         $(divO).attr({"class":("button" + " left"),});
         let divT = document.createElement("div");
         $(divT).attr({"class":("button" + " rigth"),});
         let divTR = document.createElement("div");
         $(divTR).attr({"class":("button" + " delete"),});
         $(this).append(divO);
         $(this).append(divT);
         $(this).append(divTR);
     }else if(event.type == "mouseleave"){
        setTimeout(function(){
            $("div").remove(".button, .left");
            $("div").remove(".button, .rigth");
            $("div").remove(".button, .delete");
        }, 2000);
     }
});