This question already has answers here:
Callback function - use of parentheses
(4 answers)
When do I use parentheses and when do I not?
(5 answers)
setTimeout in event listener
(1 answer)
Closed 24 days ago.
This question is not about fixing a code,as I managed to do it, but to understand why it's happening.
The idea was to delay a pop-up window (with 2 buttons and 1 input text). Initially I used
version-b(a setTimout function using an arrow function as a parameter) but buttons weren't responding to any interaction. After trying different things I tried extracting the arrow function, in version-b, into a regular function (version-a) and everything worked perfectly.
I guess the issue is related to the way setTimeout() and arrow functions work but couldn't find the reason why it's happening.
VERSION-A:
let usrNameQs="";
function loadPopUp(){
setTimeout(()=>{
document.querySelector(".popup").style.display = "block";
usrNameQs=document.querySelector("#userName");
usrNameQs.value="";
changeNamePlayer("");
},500);
}
window.addEventListener("load",loadPopUp());
VERSION-B:
let usrNameQs="";
window.addEventListener("load",**setTimeout(()=>**{
document.querySelector(".popup").style.display = "block";
usrNameQs=document.querySelector("#userName");
usrNameQs.value="";
changeNamePlayer("");
},500)
);
Related
This question already has answers here:
Is event a global variable that is accessible everywhere inside the callback chain?
(1 answer)
When to use parentheses with javascript function [duplicate]
(3 answers)
Closed 11 months ago.
I'm working on a very simple game using vanilla JavaScript and the behavior I'm seeing right now goes against everything I've learned about with functions. I don't understand why getInput can be called without the usual parenthesis that you'd use when calling functions. In fact, when I add parenthesis like this: document.addEventListener("keydown", getInput());, it doesn't work at all.
So then, how am I able to receive and print the event key without it having been passed as a parameter?
document.addEventListener("keydown", getInput);
function getInput() {
console.log(event.key);
}
This question already has answers here:
When do I use parentheses and when do I not?
(5 answers)
Is JavaScript a pass-by-reference or pass-by-value language?
(33 answers)
Closed 1 year ago.
I was going through a Svelte tutorial where they bind a function to on:click in a button and they show how if you put () after the function name it doesn't work right, it runs once when the page loads and then when you click the button the function isn't ran. They said to remove the () from the function name so that you bind to a pointer to the function instead of the function itself. If you do that then it works as expected. I did further research and it looks like pointers to functions in JavaScript don't really exist. So what's going on here? Do pointers to functions exist or do they not exist, and what's the difference in Svelte when binding to a function that has () (what's that called?) after its name and a function that doesn't?
This question already has answers here:
What is the (function() { } )() construct in JavaScript?
(28 answers)
Closed 3 years ago.
I am working on some JavaScript code and I run into this syntax that I have never seen and I am trying hard to understand but cannot find good examples.
Can someone please describe what might be going on here?
function onMouseMove(event) {
(function(ev) {
// some piece of code
})(event);
}
This syntax is used to create an inner scope using a function and that function is immediately invoked with the event object.
This question already has answers here:
Javascript infamous Loop issue? [duplicate]
(5 answers)
Closed 8 years ago.
I have a click event attached to an element via JQuery in a loop (loop variable i):
$('#id_'+i).click(function() {ItemClick(i)});
And defined somewhere else:
function ItemClick(x) {
alert(x);
}
As expected, this doesn't work as expected, because of the closure. I'd like to see a different number shown for each different click event, instead I just get the last value of i.
I know I need to turn the i in the closure to something that somehow isn't attached to the scope of the closure, but it eludes me, even after trying various examples. Such as:
$('#id_'+i).click(function() {ItemClick(function(x){return x)(i))});
Is there a neat and concise way of doing this?
EDIT
After looking at the duplicate, I now have two answers (please close the question):
Answer A
$('#id_'+i).data('index',i);
$('#id_'+i).click(
function() {
ItemClick($(this).data('index'));
}
);
Answer B
$('#id_'+i).click(
function(index) {
return function () {
ItemClick(index)
};
}(i)
);
This is a very common javascript issue that occurs because Javascript is closure/scope based, not block based.
You can fix this by creating a closure around your function call.
$('#id_' + i).on('click', function() {
(function (index) {
ItemClick(index);
}(i));
});
jsFiddle Demo
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();