Unexpected behaviour calling function from function [duplicate] - javascript

This question already has answers here:
What is the difference between a function call and function reference?
(6 answers)
Closed 2 years ago.
Recently I started learning about JS, and I got stuck in the following issue:
I am trying to call a function "draw_point" when a "mousemove" event happens.
When trying the following, the code works as expected (the function gets called):
svg.on('mousemove', draw_point(true));
But when replacing the caller function like this, it stops working and I don't get any error messages to troubelshoot.
svg.on('mousemove', function () {
draw_point;
});
Any explanation of what is going on?

Both examples are wrong, but for different reasons. In the first, you're calling the functiondraw_point immediately and passing its return value to the .on call. In the second, you're creating an anonymous function that wraps draw_point, but you're not calling draw_point. This is legal because javascript allows empty statements like myVar; or 3;.
What you want to do is pass the function draw_point, but not call it. It will be called when the handler runs:
svg.on('mousemove', draw_point);

Related

Function as a callback reloads without respecting the event listener while using arrow-function gives intended behaviour. Why is it so? [duplicate]

This question already has answers here:
What is the difference between a function call and function reference?
(6 answers)
addEventListener calls the function without me even asking it to
(5 answers)
Closed 1 year ago.
Goal
Console must log a message only on clicking the button.
Set-up
const button_l = document.querySelector('.btn-left');
method-1 (Using arrow function as a callback)
button_l.addEventListener('click', () => {
console.log('I am in')
});
method-2 (Using function as a callback)
button_l.addEventListener('click', changeSlide());
function changeSlide() {
console.log('Am I globally present?');
}
Problem Facing
Using method-1 gives the desired results.
Using method-2, the function is called on page load, but when I remove the parentheses (from changeSlide() to changeSlide), it functions as it should, why is it so?
I think it is something very fundamentally obvious that I do not know.
I appreciate a link/reference to any helpful theory/understanding.

Disallowing function to be called from Console in Javascript [duplicate]

This question already has answers here:
How to disable JavaScript function calls from the browser console?
(6 answers)
Closed 3 years ago.
Alright so I've a function (not exactly the one written bellow, that one is just an example)
function test()
{
alert("Hello");
}
Now the problem is that people are able to go into console and just type "test()" and call the function.
Is there a way to prevent this? I dont want of people to call functions from the console.
You can narrow the context that your function is executed in, eg:
(function() {
function test() { /* Do anything */ }
test();
// Call test anywhere here
})()
test(); // Error: test is undefined

$.when().done() is firing the done function before when completes [duplicate]

This question already has answers here:
How do you work with an array of jQuery Deferreds? [duplicate]
(4 answers)
Closed 6 years ago.
I have a page like this:
$(document).ready(function() {
$.when(ajaxcall1(),ajaxcall2(),ajaxcall3()).done(finalCall());
});
For some reason the finalCall() is firing simultaneous to the three calls surrounded by $.when().
I tried calling a reference to the finalCall() function as in:
$(document).ready(function() {
$.when(ajaxcall1(),ajaxcall2(),ajaxcall3()).done(finalCall);
});
But even then, it still fires the function before the prior 3 complete.
NOTE: I am not including the functions here as they are not relevant. I just need to know why the finalCall() function would fire simultaneous to then $.when() functions.
Thank you.
$.when does not call your callback at all. You are doing it yourself:
// vv
$.when(ajaxcall1(),ajaxcall2(),ajaxcall3()).done(finalCall());
// ^^
Change that to
$.when(ajaxcall1(),ajaxcall2(),ajaxcall3()).then(finalCall);
where the function is actually passed into the promise method, and it'll work (assuming your ajax functions return promises).

call self invoking function from outside body function [duplicate]

This question already has an answer here:
Function in if condition clause
(1 answer)
Closed 6 years ago.
So i have the following code:
(function init_chart(){
// body function
})();
it's working as expected. but when i tried to call the init_chart() from outside the function, console said it is undefined. then i tried to add the following line inside init_chart() function:
window['init_chart'] = this;
now console said init_chart is not a function.
You are creating a named function expression function, so basically the function is not defined on the global scope. The easiest way to get around it is to do the following:
function init_chart(){
// body function
};
init_chart();

jQuery function vs handlers [duplicate]

This question already has answers here:
what is the difference between calling function in JavaScript with or without parentheses ()
(4 answers)
Closed 9 years ago.
A simple question from someone trying to learn:
I have this:
$(function(){$("#topFlag").hover(changeFlag, setFlag ); });
function changeFlag(){
//some code
};
function setFlag(){
//somecode
};
And it's all working (now). But what I expected to use was:
$(function(){$("#topFlag").hover(changeFlag(), setFlag() ); });
What's the difference? Why doesn't changeFlag() (with the parens) work? Isn't this a function call? What if I wanted to pass a parameter to the function?
Thanks for any insights (or pointers to documentation I can read). I've already checked out:
http://api.jquery.com/hover/
http://www.w3schools.com/js/js_functions.asp
changeFlag is a function.
changeFlag() calls that function.
You need to pass the function. You don't need to call the function and pass its return value.
When you add braces after a function name , it executes the function
setFlag() ; // calls the function
But you want the function to fire , when you hover over the element
And not at the time of attaching the event
In javascript the functions are also variables, when you pass it as a parameter you want to send the function to execute, if you write this yourFunc() you would be sending the result of that function instead.
To send parameter I use this:
$(function(){$("#topFlag").hover(function(){changeFlag(param1, param2,...)}, function(){setFlag(param1, param2,...)}); });
this creates an anonym function that call your functions.

Categories