Javascript function call within function [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Improve this question
I am using VueJS with GoogleMaps to perform actions on a map. Therefore I wrote this function setup:
methods: {
// Init GIS
init: function() {
initGISMap(this.$els.map);
},
updateGIS: function() {
getAutoCompletePlace(function(place){
searchMarker.setPosition(place.geometry.location);
autocompletePlace = place;
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
self.updateIncidentForm();
});
},
updateIncidentForm: function() {
console.log("UpdateIncidentForm");
getAddressComponents(function(components) {
this.autoCompleteAddress = components;
this.setIncidentAddressFields(components);
});
},
(...)
I want to call the updateIncidentForm function, when the getAutocompletePlace performs. The error I get in my console is:
bundle.js:11073 Uncaught TypeError: self.updateIncidentForm is not a
function
Which is strange, as it is a function as defined in the code? Do I need to call the function differently?

You are calling self.updateIncidentForm() in your callback function, but you don't actually define the variable self anywhere.
Presumably, you meant to write something like:
updateGIS: function() {
var self = this; // <--- you forgot this line!
getAutoCompletePlace(function(place){
// (irrelevant code omitted)
self.updateIncidentForm();
});
},
The line var self = this saves a reference to the object you called the updateGIS() method on into the local variable self, so that you can use it inside the anonymous callback function you pass to getAutoCompletePlace() (where the value of this will be something different).
BTW, in modern (ES5.1+) JavaScript, another way to achieve the same result would be to use bind() to fix the value of this inside your callback, like this:
updateGIS: function() {
getAutoCompletePlace(function(place){
// (irrelevant code omitted)
this.updateIncidentForm();
}.bind(this));
},
The .bind(this) at the end of the callback function definition locks the value of this inside the callback to the value it had in the outer updateGIS() function.

Related

Calling a function within a function from outside [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I am having some trouble here trying to call function C from an onClick event on the page.
function leftArrowClicked() {
functionA(functionC);
}
function functionA() {
function functionB(w) {
function functionC() {
// do stuff
};
}
}
<div id="dashboard_left_arrow" onclick="leftArrowClicked()">Click</div>
But it's of course not working. Currently seeing 'functionC is not defined' in the console. I don't know much about nested functions, hence probably why my method isn't working. Any ideas?
You can use something called Modular Design Patterns. It goes something like this -- you can see that functionA is an function that is already invoked, so I can call functionB directly on that because it is returned inside an object. Calling functionC can be done on top of that.
var functionA = (function() {
function functionB(w) {
function functionC() {
// do stuff
return 'inside functionC';
}
return {functionC:functionC};
}
return {functionB:functionB};
})();
function leftArrowClicked() {
console.log(functionA.functionB('').functionC());
}
<div id="dashboard_left_arrow" onclick="leftArrowClicked()">Click</div>

Jquery object function waits for all the statement to complete [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
As I am learning a jquery and new to it I created a jquery object like
$(function () {a();b();c()})
As I have 3 method call under the Jquery object function and the Jquery function waits for end of every method call after that only displays the result . So I wanted to know is there a way that we can show work information of those methods which has completed the work , like if a() has been called and work is done it should display the result and should not wait for other methods to to be called and processed .
There are multiple ways to handle async functions in JavaScript. The easiest way is using callbacks if you are new to this language.
function a(callbackA) {
// do something...
console.log('A')
callbackA();
}
function b(callbackB) {
// do something...
console.log('B')
callbackB();
}
function c() {
// do something...
console.log('C')
}
// usage:
a(function() {
b(function() {
c();
});
});

How does this javascript class and method work? [duplicate]

This question already has answers here:
Where do the parameters in a javascript callback function come from?
(3 answers)
Closed 4 years ago.
As seen here from Twilio's documentation, how does the following code work? We have a connection class and an on method. If I haven't previously defined what hasEarlyMedia, showRingingIndicator, or playOutgoingRinging mean, then how does the on method know what they mean and what to do with them? Thanks.
connection.on('ringing', function(hasEarlyMedia) {
showRingingIndicator();
if (hasEarlyMedia) { playOutgoingRinging(); }
});
Maybe is easier to understand if we rewrite the code like this:
// when the Connection has entered the ringing state,
// call handleRingingEvent (callback function) and pass an argument,
// a boolean denoting whether there is early media available from the callee
connection.on('ringing', handleRingingEvent);
function handleRingingEvent(hasEarlyMedia) {
showRingingIndicator();
if (hasEarlyMedia) {
playOutgoingRinging();
}
}
// if not defined somewhere else
function showRingingIndicator() {
// do something
}
// if not defined somewhere else
function playOutgoingRinging() {
// do something
}
I hope this helps.
hasEarlyMedia is an argument. Please check
showRingingIndicator(); and playOutgoingRinging(); method must be defined somewhere. Must be function declared in your one of the library which you have included in your file.

Call a function inside DOM ready [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I Have a Javascript library and unfortunately i Shouldn't change it .
there is a DOM Ready function and i need to call a function inside it, codes as below:
function ready(fn){
if (document.readyState != 'loading'){
console.log('fn called');
fn();
}
else {
console.log('fn loaded');
document.addEventListener('DOMContentLoaded', fn);
}
}
ready(function(){
function hello() {
console.log("hello world!");
}
});
then i need to call hello from outside of this scope, from another function like this:
function btnstart(){
hello();
}
how i can do this?
This is an explanation of your problem in a bit more detail. It's not an answer and I don't expect it to be accepted. It's to help you understand why you can't do what you're asking, unless you can change the existing code.
The problem you are facing is that you create an anonymous function that contains hello() and then pass that to another function. Outside the scope of that anonymous function, hello() does not exist and is therefore not accessible.
Take this example...
function domReady(fn) {
fn.hello();
}
domReady(function() {
function hello() {
console.log("hello");
}
});
This creates an anonymous function and passes it to domReady(), which in turn references it as fn. However, this will also fail as fn does not have a function called hello(). That method would be created if you called fn(), but would still only exist inside that function.
What you really need to do is move hello() outside the scope of domReady() and just pass it as a reference, like this...
function domReady(fn) {
fn();
}
function hello() {
console.log("hello");
}
domReady(hello); // note there are no parenthesis () after hello, so it is a reference and not immediate executed
If you can change that then you can simply call hello() whenever you like (within the same scope). If you cannot change that then you cannot do what you are asking.

Should favor "_this" instead of "self" in javascript? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
In Airbnb JavaScript Style Guide, they mentioned "When saving a reference to this use _this."
// bad
function() {
var self = this;
return function() {
console.log(self);
};
}
// bad
function() {
var that = this;
return function() {
console.log(that);
};
}
// good
function() {
var _this = this;
return function() {
console.log(_this);
};
}
However, I read few books mentioned "self" is good. Like in AngularJS: Up and Running.
<script type="text/javascript">
angular.module('notesApp', []).controller('MainCtrl', [function () {
var self = this;
self.message = 'Hello ';
self.changeMessage = function () {
self.message = 'Goodbye';
};
}]);
</script>
So, could any one tell me the reason to use "_this" instead of "self"?
This is just personal preference. However, it's best to only use one option inside a project's codebase. So don't use _this in one function block, then that or self in the other..
As noted by others, this is purely a coding style preference. I would offer a suggestion: If your team's code base is interested in continuing to use lexical scoping for this, then consider using ES6's fat arrow function instead to avoid creating an unnecessary variable.
This of course all depends if your project is ready to implement ES6 features.
I would not use self as it is already in use as another pointer to the window object. See here (part way down page) for an example of using self like a variable (without needing to prefix it as window.self): https://developer.mozilla.org/en/docs/Web/API/Window/self

Categories

Resources