jQuery implements delayed processing effect of mouse passing event_jquery

JQuery mouse over (hover) event delay processing, the specific JS code is as follows:

(function($){ 
  $.fn.hoverDelay = function(options){ 
    var defaults = { 
      hoverDuring: 200, 
      outDuring: 200, 
      hoverEvent: function(){ 
        $.noop(); 
      }, 
      outEvent: function(){ 
        $.noop(); 
      } 
    }; 
    var sets = $.extend(defaults,options || {}); 
    var hoverTimer, outTimer; 
    return $(this).each(function(){ 
      $(this).hover(function(){ 
        clearTimeout(outTimer); 
        hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring); 
      },function(){ 
        clearTimeout(hoverTimer); 
        outTimer = setTimeout(sets.outEvent, sets.outDuring); 
      }); 
    }); 
  } 
})(jQuery); 

The hoverDelay method has four parameters, which means the following:
hoverDuring Delay time of mouse passing
outDuring  Mouse out delay time
hoverEvent Method executed after the mouse passes
outEvent       Method executed when the mouse is moved out
The purpose of this function is to separate the mouse passing event and delay. Delay and delay clearing have been solved by this method. All you have to do is set the delay time and the corresponding mouse pass or removal event. Let’s take a simple example of , as follows:

$("#test").hoverDelay({ 
  hoverDuring: 1000, 
  outDuring: 1000, 
  hoverEvent: function(){ 
    $("#tm").show(); 
  }, 
  outEvent: function(){ 
    $("#tm").hide(); 
  } 
}); 

The following is a more concise case:

$("#test").hoverDelay({ 
  hoverEvent: function(){ 
    alert("经过 我！"); 
  } 
});

means that the element with id test will pop up a pop-up box containing the text "Pass me!" 200 milliseconds after the mouse passes over it.

The above is all about the delayed processing of jQuery mouse over (hover) event. I hope it will be helpful to everyone's learning.