This question already has answers here:
What is a callback function?
(22 answers)
Closed 7 years ago.
$("p").click(function(){
// action goes here!!
});
In the above jquery code why we pass a function() to the event?
It's called a callback or an anonymous function that you want executed when the event happens. You'll notice it's not just jQuery, but almost all Javascript frameworks will expect one. It's usually whenever you are binding to events, executing functions that might take a while to return, or functions that execute other functions.
But you can also provide it a function name if you want.
function clickedMe(){
alert("Something clicked me");
}
$("p").click(clickedMe)
Because the click method is defined this way (the method parameter ).
See:
click
You have to understand its not a default JavaScript method, this method is defined in the JQuery so you have to call it as it is defined in the method.
Behind the scene actually when JQuery registering any event with DOM its only says to do one thing which is calling your provide method.
The simplest answer: according to documentation.
https://api.jquery.com/click/
When a user clicks a p element, jQuery is supposed to fire an event and execute something. How is it supposed to pass actions, if not using functions?
Related
This question already has answers here:
React Function Calling Methods
(3 answers)
Closed 8 months ago.
I have noticed that (at least in React) there are different ways to call a function. I'd say:
onClick={myFunction}
onClick={myFunction()}
onClick={()=>myFunction}
onClick={()=>myFunction()} /*Not sure if I've seen this type*/
Being the case all are correct, what are the difference between them?
onClick={myFunction}
Assigns myFunction to onClick.
onClick={myFunction()}
Calls myFunction immediately and assigns the return value (which needs to be another function) to onClick.
This is often an error caused by people not understanding how () works and wanting the previous syntax.
onClick={()=>myFunction}
Creates a new function and assigns it to onClick.
The new function mentions myFunction but doesn't do anything with it. It is a noop.
It is always a mistake.
onClick={()=>myFunction()}
Creates a new function, which calls myFunction, and assigns it to onClick.
This is usually a waste of resources. It is useful only if myFunction would do something with the event object that onClick passes to the event handler when called and you want to prevent that.
If you were to pass arguments to myFunction (which this example does not) then it would be more generally useful.
This question already has answers here:
jQuery best practices in case of $('document').ready
(9 answers)
Closed 4 years ago.
Does this:
$(document).ready(function(){
alert("Hello World");
});
And this:
(function($){
alert("Hello World");
})(jQuery);
do the same thing?
The former is what I commonly use and the second I have seen used in several plugins. Are they the same, if not then what are their differences and which one to use when?
They are not the same.
The former is a document.ready event handler. It will run as soon as the DOMContentLoaded event fires. It can also be written like this:
$(function() {
alert("Hello World");
});
The latter is an Immediately Invoked Function Expression (IIFE). This will be executed immediately (as the name implies). Therefore you need to manually ensure that the DOM is in a state ready to be interacted with before you execute this logic. You can generally do this by placing the script at the end of the body tag, or within it's own document.ready handler. The latter is a little redundant when working with jQuery, though.
This question already has answers here:
When do I use parentheses and when do I not?
(5 answers)
Closed 6 years ago.
I have written a function and intend to call it in several circumstances. Here is the function:
var responsive = function(){
$('#menuicon').toggleClass('menuicon-res');
$('.fixed-menu-item').toggleClass('res');
}
In a certain case, calling the function works only when written WITHOUT parenthesis after it:
$('#menuicon').click(responsive);
In another, similar case, calling the function works only when written WITH parenthesis after it:
$('#top').click(function(){
$('html, body').animate({scrollTop: 0},500);
responsive();
});
I think I understand that the first case (w/o parenthesis) returns the function for callback, and the second case (w/ parenthesis) returns the output of the function. Can anyone help explain why the way to call my function changes in these two scenarios?
Thanks;
CPR
In the first scenario you are assigning the function to be run on your click event, and the click event will do the calling. In the second scenario you are calling the function yourself.
The first case you are talking about is hooking up your function as an event listener, which will call the passed function when an event is triggered
//this will execute when "#menuitem" is clicked
$('#menuicon').click(responsive);
Your second case you are calling it yourself, here just putting responsive without actually invoking it will do nothing.
$('#top').click(function(){
$('html, body').animate({scrollTop: 0},500);
responsive();
});
This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 6 years ago.
I have a listener like this one :
this.frame.on('touchend', self.findClosestSlide);
I need to have it like this, instead of inside an anonymous function in order to be able to unbind it later, using the function name.
My problem is that, once I am in the findClosestSlide function, my this object logically becomes this.frame.
How can I access the original this, or how can I have control on the context I'm sending to my callback function? (without using an anonymous function)
You can use Function.bind() or $.proxy() to pass a custom context to a callback like
Cross Browser, use $.proxy()
this.frame.on('touchend', $.proxy(self.findClosestSlide, self));
or IE9+, use function.bind()
this.frame.on('touchend', self.findClosestSlide.bind(self));
Why? because by default this inside the event handler will refer to the element that was targeted by the event
You can store this inside another variable such as that or $this than using it inside your findClosestSlide function.
This question already has answers here:
Calling a function in JavaScript without parentheses
(7 answers)
Closed 9 years ago.
I have javascript script code here. When I execute my code as it is then it does not trigger func_two function. But when I change following code in func_one
if (this.remove) {
this.func_two;
}
to this
if (this.remove) {
this.func_two();
}
Then it does trigger second function. But I want to trigger it this way this.func_one. IS it possible to do it this way? How?
You have to put () when you call a function, you can't just, out of nowhere, decide that you want it to work another way.
Take a look at this answer, it may help you.
this.func_two;
This statement return the function. It does not call the function. To call the function you have to add () at the end. or you have to do it like:
f2=this.func_two;
f2();