Call javascript function only once on either click event or scroll event for particular class

Question

Let's say i have a javascript function call function playGauge().

I want to call this function only once when either a div with class="myClass" is clicked or scrolled. For click I am using following code:

    var myclassClicked = false;
    $('.myClass').click(playGauge);


    function playGauge(){
    if (myclassClicked === true) return false;
    myclassClicked = true;
///do some other stuff
}

How to add scroll functionality in a similar way to my code and my function playGauge().

Thank you!

moonwave99 · Accepted Answer · 2014-02-05 21:25:38Z

3

$.one is your friend:

$('.myClass').one('click scroll', function(event){ ... });

answered Feb 5, 2014 at 21:25

moonwave99

22.9k3 gold badges49 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

adeneo Over a year ago

That was my first thought as well, but it should be noted that this fires once for each element in the collection, and not just one time for all.

plalx Over a year ago

I haven't tested by I am under the impression that it will play once for every .myClass elements rather than once for all.

John S Over a year ago

I'm not sure how it deals with multiple elements, but it fires once for each event type. so you get one for click and one for scroll: jsfiddle

adeneo Over a year ago

@JohnS - you do, but as it's a class selector, there could be more than one element, and then the event handler would fire once for each element -> jsfiddle.net/Tx84F/1

John S Over a year ago

@adeneo - I originally thought the OP wanted the event handler to run once per matching element, but perhaps I misinterpreted that.

|

adeneo · Accepted Answer · 2014-02-05 21:55:01Z

3

Remove the event handler once the event occurs on any of the elements matching the selector

$('.myClass').on('click scroll', function() {
    $('.myClass').off('click scroll')
    playGauge();
});

edited Feb 5, 2014 at 21:55

answered Feb 5, 2014 at 21:25

adeneo

319k29 gold badges410 silver badges392 bronze badges

5 Comments

plalx Over a year ago

Using event delegation would be slightly better.

adeneo Over a year ago

@plalx - Why on earth would event delegation be better with non-dynamic elements? I don't get that comment at all!

plalx Over a year ago

Well, it all depends on how many .myClass elements there is on the page, but it will be more memory-efficient to register a single handler rather than multiple ones if there are many. Perhaps I should have said "using event delegation could be slightly better if there are many .myClass elements on the page."

user2233738 Over a year ago

@adeneo a comma was missing in the first line, but it only works for click and not for scroll.

adeneo Over a year ago

That's strange, it works fine for me (added the comma btw!) -> jsfiddle.net/p8D5Y/1

R3tep · Accepted Answer · 2014-02-06 10:50:53Z

0

Try to add event scroll :

$('.myClass').scroll(playGauge);

Documentation

edited Feb 6, 2014 at 10:50

answered Feb 5, 2014 at 21:19

R3tep

12.9k10 gold badges53 silver badges77 bronze badges

Collectives™ on Stack Overflow

Call javascript function only once on either click event or scroll event for particular class

3 Answers 3

6 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related