jQuery on scroll listener after click event

Question

What is the proper way to activate an on scroll listener after a click event?

I'm currently using:

$('.button').click(function (event) {
   $(window).on("scroll", someFunction);
}

someFunction = function() {
   //do stuff 
   $(window).off("scroll"); //disable scroll listener
}

On a click event I enable the scroll listener which runs someFunction. The function does stuff and disables the scroll listener when finished. The scroll listener is enabled again on click.

My concern is that I'm not doing it right. Please advise!

Note: The scroll listener cannot run indefinitely. It starts on click and must finish at the end of myFunction.

Note: I'm not trying to detect when user stops scrolling..

possible duplicate of [jQuery scroll() detect when user stops scrolling](http://stackoverflow.com/questions/9144560/jquery-scroll-detect-when-user-stops-scrolling) — Jako, May 06 '15 at 17:30
@Jako not dublicate. I'm trying to find out how " to activate an on scroll listener after a click event" as posted. Not detect when user stops scrolling. Totally different! — CyberJunkie, May 06 '15 at 17:32

sergdenisov · Accepted Answer · 2015-11-24T16:43:35.537

6

You could use jQuery .one():

$('.button').on('click', function() {
    $(window).one('scroll', someFunction);
});

edited Nov 24 '15 at 16:43

answered May 06 '15 at 17:39

sergdenisov

8,327
9
48
63

score 3 · Answer 2 · answered May 06 '15 at 17:33

3

Every single click adds an additional scroll event listener. I would encapsulate the binding with an additional variable:

var isScrollBindingActive = false;
$('.button').click(function (event) {
    if (!isScrollBindingActive) {
        isScrollBindingActive = true;
        $(window).on("scroll", someFunction);
    }
}

someFunction = function() {
   //do stuff 
   $(window).off("scroll"); //disable scroll listener
   isScrollBindingActive = false; // allow binding again if wished
}

answered May 06 '15 at 17:33

Alexander Bondar

524
4
21

Thanks! This is why I was having trouble! I would vote as correct answer but Sergey's solution `$(window).one('scroll', someFunction);` seems to work as well with less code. – CyberJunkie May 06 '15 at 17:42

score -1 · Answer 3 · answered May 06 '15 at 17:25

-1

You can do it the following way:

$('.button').click(function (event) {
   $(window).bind("scroll", someFunction);
}

someFunction = function() {
   //do stuff 
   $(window).unbind("scroll"); // remove scroll listener
}

answered May 06 '15 at 17:25

Tyr

2,810
1
12
21

is there a difference using `bind` instead of `on`? – CyberJunkie May 06 '15 at 17:29
1

yea, `bind` is deprecated – scniro May 06 '15 at 17:29
I don't find any deprecated flags in the api for bind/unbind. – Tyr May 06 '15 at 17:54
I think, @sal-niro means `live`. – Alexander Bondar May 06 '15 at 18:18
@Tyr okay you are perhaps correct about official deprecated-ness, but the docs do state "As of jQuery 1.7, the `.on()` method is the preferred method for attaching event handlers to a document". Anyways, `bind()` really shouldn't be used in place of `on()`. Unless you can think of a good reason? – scniro May 06 '15 at 18:22
As of [jQuery forum post](https://forum.jquery.com/topic/difference-between-bind-and-on) `on` offers a bit more functionality and is preferred to be used. `bind` is just an alias for `on`. – Alexander Bondar May 06 '15 at 18:28

jQuery on scroll listener after click event

3 Answers3