jQuery one function

Question

How to create a function jQuery one() on $(document).ready, I know the syntax for click events, and selectors, but I don't know how to make a function that would run only on document ready, and only once, with switch statements in it?

Do you have any code ? `$(SELECTOR).on(HANDLER)` will work just fine.... — Rayon, May 28 '16 at 18:30
The `ready` event only occurs once per page. If you're seeing duplication, check that the entire script is only included once. Also, [jQuery $(document).ready () fires twice](https://stackoverflow.com/questions/10727002/jquery-document-ready-fires-twice) — Jonathan Lonowski, May 28 '16 at 18:31
@JonathanLonowski `.ready()` can be called multiple times, see http://stackoverflow.com/a/36144130/ — guest271314, May 28 '16 at 18:45
Yes "The ready event only occurs once per page" is true, but if you call `.ready` multiple times it will call the callback multiple times. You are saying, in effect, that you want to shoot your foot twice but you only want one hole in your foot. — doug65536, May 28 '16 at 20:30

score 0 · Answer 1 · answered May 28 '16 at 18:29

function one() {
   alert("Once called");
}

$( document ).ready(function() {
    one();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Just declare your function as you normally would and call from within document.ready.

https://learn.jquery.com/using-jquery-core/document-ready/

function one() {
   console.log("Do one");
}

$( document ).ready(function() {
    one();
});

Mike.Alvarez · Accepted Answer · 2016-05-28T18:37:46.107

By default the function will only be run once unless there are event listeners that call it more than once.

Rayon's answer is not the best. Put the function once() inside $(document).ready function so it won't pollute the global namespace. It also ensures a faster resolve of the function name because of JavaScript's scope chains.

Put it outside if it's a reusable component so you could easily move it in a separate file and call from different contexts. This would apply if you are developing a library or a big application.

$(document).ready(function() {
  once();
 function once() {
   alert("See, this happens only once");
  };
});

<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
<div>
Test
</div>

score 0 · Answer 3 · answered May 28 '16 at 18:33

var handler = function() {
  alert('Called!');
};
$(document).ready(function() {
  handler();
  $('#elem').one('click', handler);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="elem">Only Once!</div>

score 0 · Answer 4 · answered May 28 '16 at 18:38

If you want to be absolutely sure the function is run only once, you can use a flag in case it's accidentally called again:

var flag = false;

function one() {
    if (!flag) {
        flag = true;
        //do stuff
    }
}

//.ready()
$(function() {
   one();
});

If the function is unique to one page, you can declare it within the .ready() call.

score 0 · Answer 5 · answered May 28 '16 at 18:44

You can use $.Callbacks() with parameter "once"

function once() {
  alert("once")
}

var callbacks = $.Callbacks("once");

callbacks.add(once);

$().ready(callbacks.fire); // call `once`

$().ready(callbacks.fire); // this will not call `once`

$().ready(function() {
  alert("do other stuff")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

jQuery one function

5 Answers5