Break out of function within enumarable.each iteration - javascript

I have a Prototype class - within the class i call a function and within this function i do en enumerable.each iteration. If an element within this iteration fails a check i then call another function which then re-calls this same function later. Can i break within this iteration so not only the iteration is ended but nothing else within the function is called.
Say with this code i wouldnt want the console.log to be called if elm.something == 'whatever'. Obviously i could set a variable and then check for this after the function but is there something else that i should be doing?
myFunction: function(el){
el.each(function(elm){
if(elm.something == 'whatever'){
this.someOtherFunction(elm);
}
},this);
console.log("i dont want this called if elm.something == 'whatever'");
}
Just to be clear, in this case the console.log is just placeholder code for the beginnings of some additional logic that would get executed after this loop

You answered it yourself
"Obviously i could set a variable and then check for this after the function"
In this case, you're basically looking to not call the console.log even if elm.something == 'whatever' for a single 'elm'
myFunction: function(el){
var logIt = true;
el.each(function(elm){
if(elm.something == 'whatever'){
logIt = false;
this.someOtherFunction(elm);
}
},this);
logIt && console.log("i dont want this called if elm.something == 'whatever'");
}

The simplest way would be to avoid using each() and instead rewrite using a for loop:
myFunction: function(el){
for(var i in el) {
var elm = el[i];
if(elm.something == 'whatever'){
return this.someOtherFunction(elm);
}
}
console.log("i dont want this called if elm.something == 'whatever'");
}

Related

Javascript trouble understanding IF loop to use in a script

I'm new at javascript and am using tampermonkey for a website.
What i want to do is monitor a variable on a page and when said variable reaches a certain value, go to another page, do something, and then recheck the value of this variable.
My logic was to:
setInterval(function(){reloadPage1},10000);
var variable = someTextonThisPage;
if(someTextonthisPage meets condition)
{
go to Page2;
execute something on page 2;
setNewValueForVariable; //(or just go back to initial
//and get the new value from there)
}
Now my problem is when the if executes, it goes to page2 keeps looping the if call even if i set the variable to something false.
I tried doing something like:
function doThis()
{
if(condition)
return true;
else return false;
}
if(doThis())
{
goToPage2;
do stuff;
doThis();
}
I end up having the if statement go on and on, going to page 2 and my settimeouts to do something on that page never execute because of the next iteration of the 'if'.
What am i doing horribly wrong in my thought pattern?
Your doThis() function is right. Everything ok with it.
function doThis()
{
if(condition)
return true;
else
return false;
}
But when you check the loop you have to call it one time only. After doing stuff you are again calling doThis() function it is wrong.
if(doThis())
{
goToPage2;
do stuff;
//doThis();
}
And also it depends on how you are calling this loop and functions.
For eg.,
<script>
var i = 0;
onPageLoad()
{
if(i%2==0){
return true;
i++;
}else{
return false;
i++;
}
}
if(onPageLoad()){
goToPage2;
doStuff();
}else{
onPageLoad()
}
</script>
Here when the condition meets the right statement which is i%2 == 0 it will automatically call goToPage2 function otherwise it again going to check the condition.
You can add interval/timeout in the loop to check when the variable is updating and when it calls goToPage2 function.
Hope this helps.

return statement in forEach won't stop execution of function [duplicate]

This question already has answers here:
What does `return` keyword mean inside `forEach` function? [duplicate]
(2 answers)
Closed 2 years ago.
I am trying to determine whether or not an array holds a certain item. If it does, I would like to hold the function, otherwise it should get added.
function addPacking(item){
data.packings.forEach(function(entry){
if(item.name == entry.name){
return;
}
});
data.packings.push(item);
}
Unfortunately, the data is pushed even when the if condition is met. How do I prevent this behaviour without using an else condition?
(I do not want to use else because my actual code is a lot more complex than this and I'd like to keep it readable)
Edit:
Does forEach execute asynchronously?
Old ways are sometimes the best. It's because you're passing a delegate function when calling .forEach. The return within the delegate is getting lost, and isn't applying to anything. To get your desired result, you'll want to exit the calling function addPacking. This can be done using a simply for loop.
function addPacking(item){
for (var i = 0; i < data.packings.length++; i++) {
if (item.name == data.packings[i].name) {
return;
}
}
data.packings.push(item);
});
This approach also supports older browsers, unlike some, every and forEach
You can't stop forEach execution other than throwing an exception (#Yoshi). Which should not be considered as an option to affect program code flow (#Me).
What you can do is to use another method some or every
function addPacking(item){
var contains = data.packings.every(function(entry){
return item.name != entry.name;
});
if(contains) {
data.packings.push(item);
}
}
Or
function addPacking(item){
var conatins = !data.packings.some(function(entry){
return item.name == entry.name;
});
if(contains) {
data.packings.push(item);
}
}
OLD question but in case someone else comes across this thread.
If you are using ECMAScript 6 you can use the Array find() method
var found = myArray.find(function (element) { return element === arrayToFind; });
so for this particular scenario would be:
function addPacking(item){
var foundItem = data.find(function(entry){ return entry.name == item.name});
if (foundItem) data.packings.push(foundItem);
}
see http://www.w3schools.com/jsref/jsref_find.asp for another worked example.
Return just aborts the function called in forEach, not your addPackings function.
function addPacking(item){
var isInPackings = false;
data.packings.forEach(function(entry){
if(item.name == entry.name){
isInPackings = true;
}
});
if (!isInPackings)
data.packings.push(item);
}
Yo are just returning from the child function but not from the parent function
function addPacking(item){
var check=false;
data.packings.forEach(function(entry){
if(item.name == entry.name){
check=true;
return;
}
});
if (check) return;
data.packings.push(item);
}

function return on javascript

I am reading a book about javascript and I came across this syntax
this is a function
function unwantedTextEvent(){
return (navigator.vendor == 'Apple Computer, Inc.' && (event.target == event.relatedTarget.parentNode
|| (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget)));
};
and then inside another function , the author is doing just this
attachEventListener(li, 'mouseover', function(e){
if (unwantedTextEvent()) { return; }
clearTimeout(closetime);
if (branch == li) { branch = null; }
//and so on
Now, I am ashamed to admit that I have never seen that syntax again :
if (unwantedTextEvent()) { return; }
and I dont have a clue what it does. Can anybody please explain to me? What does this syntax does in general?
Thanks in advance
That syntax calls a function called unwantedTextEvent(). If that function returns an affirmative Boolean value, then the callback function(e) inside of attachEventListener is returned.
It simply stops executing in the callback function.
Basically, unwantedTextEvent() is just a big condition. If that condition is true, it stop running the function
The code after a return is never run.
It is the same as doing :
if (!unwantedTextEvent()) {
clearTimeout(closetime);
if (branch == li) { branch = null; }
//and so on
}
Return exits the function immediately. That syntax exits without returning a value.
It's an ordinary if statement. The general form of if is:
if (<test expression>) {
<code to execute>
}
optionally followed by an else clause (but your example doesn't have this).
In this case, <test expression> is a call to the function unwantedTextEvent. If it returns a true value, the <code to execute> is executed, and the function returns. Otherwise, it continues with the rest of the function.
the return; statement simply exits out of the function passed into the attachEvenListener. i.e. the anonymous function.

explain javascript: value assignment fails

var sc = new stuCore();
function stuCore() {
this.readyPages = [];
this.once = true;
var self = this;
// gets called asynchronously
this.doPrepPage = function (page){
if(self.once == true){
// still gets executed every time, assignment fails
self.once = false;
doSomeStuffOnce();
}
};
this.addReadyPage = function (pageid) {
console.log("readypage called");
this.readyPages.push(pageid);
if (!$.inArray(pageid, self.readyPages) != -1) {
this.doPrepPage(pageid);
}
};
}
why does this assignment fail? I thought I knew the basics of js, but I'm stumped by this. And furthermore what would be a possible solution? call a constructor first and set the variable there?
EDIT:
gets called like this in some other script:
sc.addReadyPage(self.id);
The jQuery.inArray function will return the index in the containing array for the given value. Your script pushes pageid into this.readyPages before checking whether it exists in self.readyPages. this.readyPages and self.readyPages are the same array reference, so the result will always be zero or greater, so the condition that calls doPrepPage will never run.
You could try switching their order around:
this.addReadyPage = function (pageid) {
console.log("readypage called");
if ($.inArray(pageid, self.readyPages) != -1) {
this.readyPages.push(pageid);
this.doPrepPage(pageid);
}
};
(edit: Removed the additional !, thanks #chumkiu)
If I understand correctly you're calling this.doPrepPage as <insert variable name here>.doPrepPage?
If this is the case then your var self passes through to the anonymous function and is stored there, so everytime you call this.doPrepPage it takes the local variable of self.
Try setting self to a global variable, this way it will permanently modify self so each time this.doPrepPage is called it uses the updated variable.

Running Javascript functions in order (one after the other)

when I try the following:
if(myFunction() == "3") {
alert('its three!');
}
my function returns undefined, when I know that it is actually returning 3.
Is this because javascript evaluates the if statement before the function can return a value?
if so how can I do something like this:
var result = myFunction();
// Wait until result is there
if(result == "3") {
alert("its three!");
}
To troubleshoot your problem, try calling the "alert" function with the return value of your function as the argument:
var result = myFunction();
// For debugging
alert(result);
if(result == "3") {
alert("its three!");
}
If the contents of the alert box are "undefined", your function is not in fact returning a value, and just assigning that non-existent result to a variable is not going to help. Check to make sure myFunction looks like:
function myFunction() {
// Perform calculations
var n = 10 - 7;
// Return result
return n;
}
The JavaScript interpreter requires neither functions to return values nor return statements to be used. That means you should double-check that there is in fact a return statement. If you are assigning the result to a variable first, that can be one way you could miss that return statement.
If you are dealing with Ajax requests, jQuery "modal dialogs," or similar constructs, it is not even possible for a function to return a value in this way (when the button is clicked or the request completes, that is). To fix the problem, your function needs to accept a callback function as a parameter. Then when done, it must call that function, passing the "returned value" as an argument:
function myFunction(callback) {
// Start an AJAX request
var x = new XMLHttpRequest();
x.open('GET', '/domath.php?expression=10-7', true);
x.onreadystatechange = function() {
if(x.readyState == 4 && x.status == 200) {
// Call callback function, "returning" a value asynchronously
callback(x.responseText);
}
};
x.send();
}
And then your main code would be:
myFunction(function(result) {
// For debugging
alert(result);
if(result == "3") {
alert("its three!");
}
});
What it sounds like is that your javascript code is calling the function before the function or the elements it accesses (ie something in the DOM) have been fully loaded, which is why the function call is returning undefined instead of '3'.
The way to prevent this is to defer calling the function until the DOM has finished loading.
This is typically done by having the function call in your document.onload() method, which only gets run when the page has finished loading, or by using jQuery's $.ready() method, which again waits until the page is ready before being run.
Hope that helps.
I am a little unclear as to what you are doing from the description. Try this to see if its what you wanted:
function MyFunction(){
var result
// Do something here
//dummy:
result = 3;
return result;
}
var Testing = MyFunction();
alert(Testing);
if (Testing == 3) {
alert("Holy Cow! Its 3!");
}

Categories