7345

Prevent Javascript function from firing multiple times

Question:

<a href="http://jsfiddle.net/u7Qpj/" rel="nofollow">jsFiddle</a> <br /> I use a customized drop-down menu which runs on jquery events and animations. <br /> The problem occurs when I activate the drop-down via mouseenter several times, which results in the menu sliding down then sliding up several times. I tried to fix it by adding .stop(true), which was successful, but it resulted in other problems like <a href="https://stackoverflow.com/questions/12020534/drop-down-menu-cut-off-after-slideout/12020685#12020685" rel="nofollow">this.</a> I followed that advice(<a href="http://jsfiddle.net/fuABW/" rel="nofollow">jsFiddle Here</a>), but it causes more unattractive problems. I need is a way to stop a function from firing redundantly, but still be able to stop a "slide down" immediately and then "slide up" if the user triggers .mouseleave I tangled with custom queues for a good 5 hours, with no success :( <br />Any ideas, advice, and criticism is welcome.

Answer1:

Basically it boils down to delaying the execution of the event handler.

var mouseoverTimer = null; $('.elem').mouseover(function(){ clearTimeout(mouseoverTimer); //ignore previous trigger mouseoverTimer = setTimeout(function(){ //wait to execute handler again //execute actual handler here }, 10); });

If the same handler was called within the specified interval the pending execution is cancelled and queued again to execute 10ms later hoping that there's no subsequent trigger within that interval.

Recommend

  • MySQL returns exact word match from text content
  • Large Sparse Matrix to Triangular Matrix R
  • jQueryUI - removing class on hover
  • Haskell: Data type containing other Data Types
  • GPS stays on using Intent call
  • how can a breadth-first-search-tree include a cross-edge?
  • Comparing matrix inversions in R - what is wrong with the Cholesky method?
  • How to set data to other Component in Vuejs
  • Making Toplevel resize itself to fit the title
  • Perl Moose accessors generated on the fly
  • AngularFire httpsCallable Object(…) is not a function
  • SSIS package hangs while running
  • Is it possible to run an application built on sql server 2008 to run with 2005
  • Run EF6 Query in separate Thread on WinForm Button Click Event
  • AVCaptureSession VS UIImagePickerController camera preview
  • Is there a way to clone native functions in javascript like window.alert or document.write
  • Passing information to server-side function in a Google Docs Add On
  • Accessing the variables from a PHP Anonymous Function
  • cell spacing in div table
  • How can I tell a form not to dispose a particular control when it closes?
  • SonarQube: Cannot deactivate rule with missing quality profile
  • Django model inheritance, filtering models
  • ASP.NET MVC Application won't update some controllers
  • How can I set a binding to a Combox in a UserControl?
  • Does it make sense to call System.gc() and Thread.sleep() when working on Bitmaps?
  • How to clear text inside text field when radio button is select
  • Highlight and Bold text in JTextPane
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • Problems to linebreak with an int in JLabel
  • Trying to switch camera back to front but getting exception
  • How to make Safari send if-modified-since header?
  • using conditional logic : check if record exists; if it does, update it, if not, create it
  • sending mail using smtp is too slow
  • Busy indicator not showing up in wpf window [duplicate]
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Binding checkboxes to object values in AngularJs
  • How can I use `wmic` in a Windows PE script?
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?