title: OSX inertia scrolling causing mousewheel.js to register multiple mousewheel events with the slightest scroll motion
body: <p>I have a pretty standard Flexslider instance I'm working on.  <a href="http://flexslider.woothemes.com/" rel="nofollow">Flexslider</a> incorporates well with the <a href="https://github.com/brandonaaron/jquery-mousewheel" rel="nofollow">jquery.mousewheel.js</a> plugin, allowing slides to move on mousewheel events.</p>
  
  <p>However, Mac OSX and others employ 'intertia' to scrolling effects, making it virtually impossible to scroll only one slide left or right.  The general effect is that even the slightest scroll motion in these situations triggers multiple mousewheel events and scrolls the slider multiple images left or right.  Obviously, this can't happen!</p>
  
  <p>I think the solution is to use <a href="http://underscorejs.org/" rel="nofollow">underscore.js</a> - specifically the 'debounce' function.  However, I'm relatively inexperienced in JS / jQuery and can't figure out how to implement it.</p>
  
  <p>From underscore's documentation:</p>
  
  <blockquote>
    <p><strong>Debounce:</strong> <code>_.debounce(function, wait, [immediate])</code></p>
    
    <p>Creates and returns a
    new debounced version of the passed function which will postpone its
    execution until after wait milliseconds have elapsed since the last
    time it was invoked. Useful for implementing behavior that should only
    happen after the input has stopped arriving. For example: rendering a
    preview of a Markdown comment, recalculating a layout after the window
    has stopped being resized, and so on.</p>
    
    <p>Pass true for the immediate parameter to cause debounce to trigger the
    function on the leading instead of the trailing edge of the wait
    interval. Useful in circumstances like preventing accidental
    double-clicks on a "submit" button from firing a second time.</p>
  
  <pre><code>var lazyLayout = _.debounce(calculateLayout, 300);
  $(window).resize(lazyLayout);
  </code></pre>
  </blockquote>
  
  <p>Here's the code I'm using to initialize flexslider:</p>
  
  <pre><code>// MOUSEWHEEL FIX:
  
  function debounceEffect() { // apply debounce to mousewheel here
  
  }
  
  // Initialize FlexSlider
  $(window).load(function() {     
      $('div.flexslider').flexslider({
          animation:'slide',
          controlNav:true,
          mousewheel:true,
          pauseOnHover:true,
          direction:'horizontal',
          animationSpeed:500,
          slideshowSpeed:5000,
          after:debounceEffect
      });
  });
  </code></pre>
  
  <p>Unfortunately, I can't figure out how to apply the debounce function to the mousewheel event. I think I just don't understand the moving parts well enough. </p>
  
  <p>Here is the <a href="https://github.com/woothemes/FlexSlider/blob/a4647edaf7d44a32b1d568cef570128b8d28403b/jquery.flexslider.js#L99-L106" rel="nofollow">relevant bit of code from the flexslider plugin</a>:</p>
  
  <pre><code>    // MOUSEWHEEL:
      if (vars.mousewheel) {
        slider.bind('mousewheel', function(event, delta, deltaX, deltaY) {
          event.preventDefault();
          var target = (delta &lt; 0) ? slider.getTarget('next') : slider.getTarget('prev');
          slider.flexAnimate(target, vars.pauseOnAction);
        });
      }
  </code></pre>
  
  <p>I can edit this to include some of the mousewheel plugin code as well if that's important, or you could check it out on <a href="https://github.com/brandonaaron/jquery-mousewheel" rel="nofollow">github</a>.</p>
  
  <p>I would appreciate any help on this!</p>