Updated April 18, 2023
Introduction to jQuery once
As the name suggests, ‘once’ this method is used to apply anything on the element or class once. Once, jQuery is used to filter out all the elements from the list on which property or filter is applied. So by using the once method, we can add behavior to the element and classes only once. This method is responsible for filtering out all the elements and classes which have the same behavior applied in the past by any operation or function in jQuery. Once the method is also ensuring us to apply the same behavior on the same element or class only once in the execution of the program, in the coming section, we will discuss how we can use this in programming.
Syntax and parameters
This method takes two parameters as the input to prevent the same behavior applied to the element and class more than one time. In order to use this, we need to include the .js file, or we have to install it via npm by using some command. For instance, we will see its syntax and what parameters does it take for better understating see below;
1. $(‘element’).once(‘key’).css(‘your property’);
In the above line of code, we can provide the any HTML element name; after that, we can call the once() method and inside this method, we can assign our key on which we want to apply the css or behavior only once. We will see one practice example for better understating of using once method() see below;
Example:
$('span').once('hello').css('color', 'Yellow');2. We have one more way to use the once method; here, we can use foreach to apply this effect on the HTML element see below; In the coming section, we will discuss more about it.
Example:
$('element').once().each(function() {
// your logic goes here
});How once method works in jQuery?
As of now, we know that this method is used to apply the behavior on the element only once. This method is responsible for filtering out all the elements which have already used the same behavior once in the past. So we always have a requirement like we only want to change the color of the file only once or we want to load the filed only once. There are many real-time scenarios where we can use this method to take its benefits. This section will see how to use this method in our program and how many parameters it takes and how they function. But before going forward, we will first discuss its signature, which is given by the jQuery. Let’s have a look-see below;
$(‘element_name’).once().function() : So here, as we can see, this method takes two parameters one is the key, and the other one is the function. Inside the once() method, we can specify our key on which we want to apply the behavior only once. Also, at the starting, we need to select the HTML element through which the key is associated; after this, only we can call the once() method. Once we are done with all the key and element name, we can call any function on it. So this method will apply the behavior on the class or element only once. We can also pass class name; it is not mandated that it will take only element name here.
First, this method will filter out the element on which behavior is already applied; then, it performs the action on others by checking them. In order to use this method in a program, we need to have a once.js file in our application. It can be done in two ways. Let’s discuss each approach in details; see below;
1. install via NPM: We can install the jQuery once.js dependency via npm also. But we need to execute some of the commands here. We will see in detail how we can do this in practice;
- To install the js, we need to execute the below command:
Example:
npm install jquery-once --save- Version: After this, we can check the version of the .js that is currently being installed in our program.
Example:
npm --version- Bower: For this, we need to execute one more command
Example:
bower install jquery-once2. Directly add the .js file into the application: We can also directly download the .js file and place it inside our application. Typed in the below line to get the source code of the .js file
Example:
jquery.once.js- After this, we can include the path of this file into our program. See below;
Example:
<script type="your_type" src="Your_path_for_ jquery/jquery.once.js"></script>Now we will see one program for beginners to understand it better and get familiar with the code as well see below;
$('#tag1').once().css({
background: 'Red'
});HTML file:
<p id ="tag1">Hello World !!</p>But to execute this code, we need to have jqury.once.js in our application; otherwise, the code will not work; this file can be found online by type in ‘jqury.once.js’ in any browser.
Example
In this example, we are trying to use the once() method in Jquery by including jquery.once.js code manually here. It is the same for all developers.
Example:
jqury.once.js File: This file needs to be also included; this code is available online anywhere.
(function($) {
$.fn.once = function(identifier, callback) {
var $elems, className;
if (typeof identifier === 'function') {
callback = identifier;
identifier = "";
}
className = "__processed_once_" + (typeof identifier === "undefined" ? "" : identifier);
$elems = $(this).not("." + className).addClass(className);
if (typeof callback === 'function') {
$elems.each(callback);
}
return $elems;
};
})(jQuery);Our code:
$(function() {
//our code to apply the once method on element
$('#tag1').once().css({
background: 'Red'
});
$('#tag2').once('red').css({
background: 'black'
});
$('#tag3').once('red').css({
background: 'yellow'
});
});Output:
Conclusion
In this way, we can apply a function to the element or the class only once. It is important when we are trying to override any behavior on the same element or class multiple times, So it will not allow that to happen in jQuery. This ensures us to apply the behavior only once in the whole execution of the program.
Recommended Articles
This is a guide to jQuery once. Here we discuss How the once method works in jQuery and Example along with the code and output. You may also have a look at the following articles to learn more –
