jQuery callback function after whole scrolling

Question

i bound some functions to the 'scroll' event of jquery. With this:

$window.bind('scroll', function(){ 
        fn1(...);
        afterScroll(); // function which should fired after whole scrolling.            
})

The Problem is, that i want the "afterScroll()" function been fired after all scrolling-iterations. But I think when the user scrolls one time, the event - function will be fired a few times (I tested this with some alerts) afterScroll() should just add a short animation after the scrolling is definitly finished.

For example: http://activatedrinks.com/

Someone an idea? Thanks

greets, Yannick

possible duplicate of [How to call a function after scroll has ended?](http://stackoverflow.com/questions/5515551/how-to-call-a-function-after-scroll-has-ended) -- please use the search before you ask a new question. — Felix Kling, May 22 '12 at 15:16

score 3 · Answer 1 · answered May 22 '12 at 15:06

It is hard to say when a user has finished scrolling, and there is no such event. You have to make the determination as to when a user has "finished" scrolling on your own. Some users may scroll very slowly, but would still consider it to be a single scroll. Something like..

var scrolltime = false;
$window.scroll(function () {
   fn1(...);
   if (scrolltime) {
      clearTimeout(scrolltime);
   }
   //You consider 500 MS between scrolls to be "done" with scrolling.
   scrolltime = setTimeout(afterScroll, 500);
});

score 2 · Answer 2 · answered May 22 '12 at 15:07

you need to debounce the callback to afterScroll

basically debounce discards all repeated calls to the function except the last one, all you need to do is set a threshold to tell it what 'repeated' is

here is the source of the throttle/debounce functions. very nice and useful lib. i usually include it in my projects.

score 0 · Answer 3 · answered May 22 '12 at 15:06

0

If I got you right, just set the timeout in the end, clear the timeout if the scroll continues.

setTimeout(1000, function(){ afterScroll(); });

answered May 22 '12 at 15:06

AndreyM

1,403
2
12
23

jQuery callback function after whole scrolling

3 Answers3