Run javascript function only once

Question

I have this simple javascript function:

<script type="text/javascript">
    var popup = '0';
    if(popup == '0') {
       $(document).ready(function () {     
            $(document).on('click', '.button', function(){
                  alert('test');
                  popup = '1';
            });
       }); 
    }
</script>

<button class="button">Test</button>

I want the function to alert only on the first click but it keeps working although I changed the value of popup to 1

-1 this is covered in the jQuery docs http://api.jquery.com/one/ — Evan Davis, May 25 '14 at 21:06
@Mathletics: What's the problem? The question itself is very valid. — jsalonen, May 25 '14 at 21:08
@jsalonen IMO, SO is mature enough that answering simple queries like this is no longer of value. This question is about the inability to ask questions ("How can I execute a function only once?" Though to be fair it is well represented in the title) and not about a unique programming problem. — Evan Davis, May 25 '14 at 21:11
I see your point. If you think this is not a unique programming problem, point us to a duplicate and we can proceed with closing vote. Also I need to say I prefer seeing SO as a growing community, where new users are embraced in favor of Stackoverflow "dogma". You may disagree and that's okay. And in fact that's why we vote so here is my +1 for a question I consider worthy of an answer. — jsalonen, May 25 '14 at 21:21

score 9 · Accepted Answer · answered May 25 '14 at 21:04

9

What you need is .one() function. It makes sure the code is triggered only once for you.

Docs: http://api.jquery.com/one/

Docs example:

$( "#foo" ).one( "click", function() {
  alert( "This will be displayed only once." );
});

answered May 25 '14 at 21:04

lesssugar

15,486
18
65
115

this seems the most elegant solution :) haven't heard of this before! – Michael Samuel May 25 '14 at 21:10

Martin Konecny · Answer 2 · 2014-05-25T21:17:08.127

5

Write the code as follows:

<script type="text/javascript">
    var popup = '0';

     $(document).ready(function () {     
          $(document).on('click', '.button', function(){
             if(popup == '0') {
                alert('test');
                popup = '1';
             }
          });
     }); 
</script>

Once your click listener is set, your previous if statement's location wasn't executed anymore. Only the code inside the on click function.

Alternatively, you can unbind the onClick listener instead of setting popup = '1'. Try the following:

<script type="text/javascript">
    var popup = '0';

     $(document).ready(function () {     
          $(document).on('click', '.button', function(){
              alert('test');

              //unbinds *all* listeners previously registered on "document"
              $(document).unbind('click');
          });
     }); 
</script>

Much cleaner, and as Mathletics has mentioned, cleans unnecessary callbacks from memory.

edited May 25 '14 at 21:17

answered May 25 '14 at 21:02

Martin Konecny

57,827
19
139
159

First you can address why his solution is broken. Then you can suggest better approaches. – Martin Konecny May 25 '14 at 21:04
This leaves the handler in memory, firing every time, with no effect. Unbinding will remove the handler entirely. – Evan Davis May 25 '14 at 21:05
1

Completely agree with you. But why not teach him what his wrong with his current approach first. Eitherway, question now suggests the better alternative as well. – Martin Konecny May 25 '14 at 21:07
I'm not personally an advocate of fixing bad code with an equally bad solution. Clearly the votes show that I am neither alone nor unanimously supported; we can agree to disagree. – Evan Davis May 25 '14 at 21:13
2

Many asker's will simply copy + paste the solution without understanding why their approach didn't work. We're here to teach as well as provide answers. – Martin Konecny May 25 '14 at 21:21

score 1 · Answer 3 · answered May 25 '14 at 21:09

Try:

<script type="text/javascript">
    var popup = '0';

       $(document).ready(function () {     
            $(document).on('click', '.button', function(){
                if(popup == '0') {
                  alert('test');
                }
                  popup = '1';
            });
       }); 
</script>

You had a function that was setting popup to 1 but was never checking its value again. This way it gets checked and should work properly.

Run javascript function only once

3 Answers3

Linked