JQuery Events firing even though throttled
<p>I am currently having a hard time getting a jquery script to work.
The script is supposed to scroll one div at a time.
Yet, it ends up jumping several divs at once, and sometimes registers down as up. I thought that it was the events that fired when the jquery ScrollTop animation occured, but I still see it after adding countermeasures.</p>

<p>Note that if you take out the scrolling animations, everything is fine.</p>

<p>my jquery code</p>

<pre><code>function throttle(fn, delay) {
    "use strict";
    var timer = null;
    return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}
jQuery(document).ready(function(){
    "use strict";
    var prevScrollTop = 0;
    var $scrollDiv    = jQuery('div#container');
    var $currentDiv   = $scrollDiv.children('div:first-child');
    var scrollup=1;
    var scrolldown=0;
    var threadrunning=true;
    var divid=null;

    jQuery('#container').animate({scrollTop:jQuery('#slideshow-wrapper').position().top}, 'fast', function() { threadrunning=false; console.log('jump'); });

    /*$scrollDiv.scroll(throttle(function(eventObj) */
    $scrollDiv.on("scroll", throttle(function(){
        if (threadrunning) {return;}
        threadrunning=true;
        var curScrollTop = $scrollDiv.scrollTop();

        if (prevScrollTop &lt; curScrollTop &amp;&amp; scrolldown === 0 )
        {
        // Scrolling down:
        threadrunning=true;
        $currentDiv = $currentDiv.next().scrollTo();
        console.log($currentDiv.attr('id'));
        divid =$currentDiv.attr('id');
        if (divid==="wrapper-section-photovideos") {
            scrolldown=1;
        }
        if (scrollup === 1) {
            scrollup=0;
        }
        jQuery('#container').animate({scrollTop:jQuery('#'+divid).position().top}, 'fast', function() { threadrunning=false; console.log('down'); });


        }
        if (prevScrollTop &gt; curScrollTop &amp;&amp; scrollup === 0) {
            // Scrolling up:
            threadrunning=true;
            $currentDiv = $currentDiv.prev().scrollTo();
            console.log($currentDiv.attr('id'));
            divid =$currentDiv.attr('id');
            if (divid==="slideshow-wrapper") {
                scrollup=1;
            }
            if (scrolldown === 1) {
            scrolldown=0;
            }
            jQuery('#container').animate({scrollTop:jQuery('#'+divid).position().top}, 'fast', function() { threadrunning=false; console.log('up');});
        }
        prevScrollTop = curScrollTop;

    },800));

});
</code></pre>

<p>There is a test site at <a href="http://dev.sandyd.me/~sandyd" rel="nofollow">http://dev.sandyd.me/~sandyd</a></p>

<p>Thanks.</p>
