Develop Reference

Avoid nested in loops

I have an issue with in loops, while I'm trying to look for two same-value-pairs in an array and an object:
for (features in geodata.features) {
if (geodata.features[features].geometry.type == 'Point') {
.....
} else if (geodata.features[features].geometry.type == 'LineString') {
for (itema in networkElemente) { //Here is the part whrere it gets problematic
for (itemb in networkElemente) {
if (networkElemente[itema].uuid == geodata.features[features].properties.a.ne.uuid && networkElemente[itemb].uuid == geodata.features[features].properties.b.ne.uuid) {
console.log('klappt');
var intraOrtsVerbindung = L.polyline([[networkElemente[Number(itemb)].coords.lat,networkElemente[Number(itemb)].coords.lng],[networkElemente[Number(itema)].coords.lat,networkElemente[Number(itema)].coords.lng]], {
weight: 5,
color: 'green',
opacity: 1,
}).addTo(map);
}
}
}
}
}
I have the array networkElemente and I have geodata.fea... .a and .b. Now I want to look, if geodata...a has one entry the same as networkElemente and ...b has also one entry like networkElemente. This works fine with these nested loops, which will execute the part unnecessarily often. I want to seperate the loops so that if networkElemente.length wouuld be 1000 that it does not log 'klappt' 1million time, but only 2k time. So just the same result, but not so often.
Thanks!

Welcome to StackOverflow
You problem here, apart for using for...in when you probably want for...of, is combinatorics.
The easiest optimization is to never check the same pair twice. You can do this by using a regular for...loop and offset the index of the nested loop:
var networkElemente = [];
while (networkElemente.length < 1000) {
networkElemente.push(networkElemente.length + 1);
}
var count = 0;
for (var a = 0; a < networkElemente.length; a++) {
var itema = networkElemente[a];
for (var b = a + 1; b < networkElemente.length; b++) {
var itemb = networkElemente[b];
count++;
}
}
console.log("Count: " + count);
As for your problem with logging too often, simplest solution is to simple hold a counting variable and log once after the loop is done.
Logging 2K times isn't good for performance anyway :-)

Instead of using nested loops, you could use a Map and take the uuid as accessor for the wanted data. Then check if both exists and make your poyline.
var networkElementeMap = new Map(networkElemente.map(o => [o.uuid, o])),
elementA = networkElementeMap.get(geodata.features[features].properties.a.ne.uuid),
elementB = networkElementeMap.get(geodata.features[features].properties.b.ne.uuid);
if (elementA && elementB) {
console.log('klappt');
var intraOrtsVerbindung = L.polyline([
[elementB.coords.lat, elementB.coords.lng],
[elementA.coords.lat, elementA.coords.lng]
], {
weight: 5,
color: 'green',
opacity: 1,
}).addTo(map);
}

Reducing Multiple Variables in JavaScript

Can I reduce multiple variables in JavaScript?
For example if I have 3 variables:
var foo = 10;
var boo = 15;
var lol = 15;
//Normal syntax:
foo -=1; // -> foo will be 9
boo -=1; // -> boo will be 14
lol -=1; // -> lol will be 14
Is there an option to do it with one line? or better syntax?
For example: foo ,boo ,lol -=1;

No, you cannot. Standard JavaScript does not give this opportunity. The worse thing that you nearly cannot do it functionally as well. lol -=1; or lol--; is just a shortcut for lol = lol - 1;. So if you will try to write a function, which does that for you e.g.:
function reduce() {
for (var i = 0; i < arguments.length; i++) {
arguments[i] = arguments[i] - 1;
}
}
and then call it like
reduce(foo, bar, lol);
it just won't work because you pass primitive numbers (not references). Every time you change the number inside of the function it won't change the number itself but it will return a new number instead.
This could be solved by using some object to store all the variables, e.g.:
var vars = {
foo: 12,
bar: 13,
lol: 14
};
function reduce(variables) {
for (variable in variables) {
if (variables.hasOwnProperty(variable)) {
variables[variable] -= 1;
}
}
return variables;
}
reduce(vars);
But this is not a list of 3 variables, this is kind of a context you attach them to.
If you do the stuff in a global scope (e.g. in a window without wrapping the stuff in a function), you can combine both ways above into one (Window stores all var-declared variables inside):
function reduce(vars) {
var varslist = vars.split(',');
for (var i = 0; i < varslist.length; i++) {
window[varslist[i]] -= 1;
}
}
reduce('foo,boo,lol');
but as soon as you move it to some subcontext it won't work any longer. Also it looks very nasty. I would rather prefer the second solution with vars object representing your variables context.

You can do it with one line, but you still have to repeat the operation:
foo--, bar--, lol--;
Read about the comma operator. It can be useful, but it's usually not very readable.
I wouldn't even combine var statements into 1:
var foo = 1, bar = 2, lol = 3;
because if a var changes, the entire line changes.
I used to do this:
var foo = 1,
bar = 2,
lol = 3;
but that's bad practice too, because deleting foo or lol will change more than just 1 line (because the var prefix or ; suffix).
Sometimes verbosity is good:
var foo = 10;
var boo = 15;
var lol = 15;
foo -= 1;
boo -= 1;
lol -= 1;

Can I have a setTimeout inside a handler of another setTimeout?

Here's a quick (broke) jsfiddle: http://jsfiddle.net/wH2qF/
This isn't working for some reason... is it because I have a setTimeout inside a handler of another setTimeout?
$(function() {
$("#Volume").click(function() {
setTimeout(triggerVolumeChange, 4000);
function triggerVolumeChange()
{
var volumeDiv = document.getElementById("volumeNumber");
var volumeOld = 8;
var volumeNew = 37;
var timeNew = (1000/(volumeNew-volumeOld));
changeVolume();
function changeVolume()
{
volumeDiv.innerHTML = volumeOld;
volumeOld++;
if (volumeOld <= volumeNew) setTimeout(changeVolume, timeNew);
};
});
});
Should specify that for clarity purposes I deleted other things from that Click function, and also to clarify what doesn't work exactly, well, basically, I click and nothing happens, whereas if I cut out this chunk of code it works fine... actually the setting of the vars also work fine (naturally I presume) but when I paste or uncomment the changeVolume() function then the click stops working again... Any thoughts?
--
Another piece of clarification: What I'm trying to do is, on click, simulate the volume going from value 8 to 37, in a string.. thus the setTimeout inside that function.
--
As per your guy's request, here's the entire code... I doubt it will make sense, but here it is... FYI, on click this will trigger a number of animations to simulate the flow of an application I'm designing..
<script>
$(function() {
$("#Volume").click(function() {
var userPrompt = document.getElementById("userPrompt")
userPrompt.innerHTML = "Change volume to 37";
var avatarIcon = document.getElementById("avatarIcon");
avatarIcon.innerHTML = "<img src='imgs/haloIcons-volume_82x76.png' alt='Volume'/>";
var hints = document.getElementById("hints");
hints.style.opacity = 0;
$(".dragonTvOut").toggleClass("dragonTvIn");
setTimeout(triggerP, 1000);
function triggerP()
{
var halo = document.getElementById('avatar');
if( 'process' in halo ) {
halo.process();
};
};
setTimeout(triggerUserPrompt, 2000);
function triggerUserPrompt()
{
document.getElementById("userPrompt").className = "userPromptIn";
};
setTimeout(triggerVolumeChange, 4000);
function triggerVolumeChange()
{
document.getElementById("userPrompt").className = "userPromptEnd";
var halo = document.getElementById('avatar');
if( 'resume' in halo ) {
halo.resume();
}
document.getElementById("avatarIcon").className = "avatarIconEnd";
var volumeDiv = document.getElementById("volumeNumber");
var volumeOld = 8;
var volumeNew = 37;
var timeNew = (1000/(volumeNew-volumeOld));
changeVolume();
function changeVolume()
{
volumeDiv.innerHTML = volumeOld;
volumeOld++;
if (volumeOld <= volumeNew) setTimeout(changeVolume, timeNew);
}​;
var side = 100;
var paper = new Raphael(volumeArcAnim, 100, 300);
paper.customAttributes.arc = function (xloc, yloc, value, total, R) {
var alpha = 360 / total * value,
a = (90 - alpha) * Math.PI / 180,
x = xloc + R * Math.cos(a),
y = yloc - R * Math.sin(a),
path;
if (total == value) {
path = [
["M", xloc, yloc - R],
["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
];
} else {
path = [
["M", xloc, yloc - R],
["A", R, R, 0, +(alpha > 180), 1, x, y]
];
}
return {
path: path
};
};
var arcWidth = 87;
var strokeRadius = arcWidth/2;
var indicatorArc = paper.path().attr({
"stroke": "#ffffff",
"stroke-width": 3,
arc: [side/2, side/2, 12, 100, strokeRadius]
});
indicatorArc.animate({
arc: [side/2, side/2, 60, 100, strokeRadius]
}, 1500, "<>", function(){
// anim complete here
});
};
});
});
</script>

Yes, you can have a setTimeout() inside another one -- this is the typical mechanism used for repeating timed events.
The reason yours isn't working is not to do with the setTimeout() itself; it's to do with the way you've nested the functions.
The changeVolume() function being inside triggerVolumeChange() means that you can't reference it directly using its name.
The quickest solution for you would be to remove the nesting, so that changeVolume() is at the root level rather than nested inside triggerVolumeChange().

You're missing an }:
$(function() {
$("#Volume").click(function() {
setTimeout(triggerVolumeChange, 4000);
function triggerVolumeChange()
{
var volumeDiv = document.getElementById("volumeNumber");
var volumeOld = 8;
var volumeNew = 37;
var timeNew = (1000/(volumeNew-volumeOld));
changeVolume();
function changeVolume()
{
volumeDiv.innerHTML = volumeOld;
volumeOld++;
if (volumeOld <= volumeNew) setTimeout(changeVolume, timeNew);
};
} // that one was missing
});
});

In your broken example http://jsfiddle.net/wH2qF/ there are a few problems
You forgot to tell jsfiddle to use jQuery
The id of the volume span (in JS) was ph but should be volumeNumber (as in the HTML)
Click here to see a working version
Had you selected jQuery from the libraries in jsfiddle, you would have seen an error
Uncaught TypeError: Cannot set property 'innerHTML' of null
That leads me to believe that your jsfiddle is not a good representation of your problem. Maybe try to create another reduction since the one you added only had "silly" errors?

If you don't want to use setInterval(), you can make the code work with these changes:
$(function() {
$("#Volume").click(function() {
setTimeout(triggerVolumeChange, 4000);
function triggerVolumeChange () {
var volumeDiv = document.getElementById("volumeNumber");
var volumeOld = 8;
var volumeNew = 37;
var timeNew = (1000/(volumeNew-volumeOld));
var changeVolume = function () {
volumeDiv.innerHTML = volumeOld;
volumeOld++;
if (volumeOld <= volumeNew) setTimeout(changeVolume, timeNew);
};
changeVolume();
}
});
});
Working demo at jsFiddle.

Technically there is no difference where the timer is initiated from. In most cases it is implemented as list of the timers with an identifiers and associated callback handlers.
So it will be ok if your logic is correct. There is no unpredictable conditions that bring infinite call sequences, and there is no infinite amount of timeout instances and so on.
For example imitation of setInterval function:
// Bad (unexpected multiple sequences started per each event)
const handler = () => {
setTimeout(handler)
}
<Button onClick={handler} />
// Good (previous interval closed before start new one)
const [id, idUpdate] = useState(-1)
const handler = () => {
const id = setTimeout(handler)
idUpdate(id)
}
const start = () => {
if(id !===-1) clearTimeout(id)
idUpdate(-1)
handler()
}
<Button onClick={start} />
or some else
// Bad (infinite events with small time will take all cpu time)
const handler = () => {
setTimeout(handler, 0) // actually mean several ms
}
// Good (special condition for finish iterations)
let count = 20
const handler = () => {
if(!count) return
count--
setTimeout(handler, 0)
}

jQuery - setInterval issue

I am using jQuery to generate and add a random amount of Clouds to the Header of the page and move them left on the specified interval. Everything is working fine, execpt the interval only runs once for each Cloud and not again. Here is my code:
if(enableClouds) {
var cloudCount = Math.floor(Math.random() * 11); // Random Number between 1 & 10
for(cnt = 0; cnt < cloudCount; cnt++) {
var cloudNumber = Math.floor(Math.random() * 4);
var headerHeight = $('header').height() / 2;
var cloudLeft = Math.floor(Math.random() * docWidth);
var cloudTop = 0;
var thisHeight = 0;
var cloudType = "one";
if(cloudNumber == 2) {
cloudType = "two";
}else if(cloudNumber == 3) {
cloudType = "three";
}
$('header').append('<div id="cloud' + cnt + '" class="cloud ' + cloudType + '"></div>');
thisHeight = $('#cloud' + cnt).height();
headerHeight -= thisHeight;
cloudTop = Math.floor(Math.random() * headerHeight);
$('#cloud' + cnt).css({
'left' : cloudLeft,
'top' : cloudTop
});
setInterval(moveCloud(cnt), 100);
}
function moveCloud(cloud) {
var thisLeft = $('#cloud' + cloud).css('left');
alert(thisLeft);
}
}
Any help is appreciated!

This is the way to go:
setInterval((function(i){
return function(){
moveCloud(i);
};
})(cnt), 100);

Engineer gave you the code you need. Here's what's happening.
The setInterval function takes a Function object and an interval. A Function object is simply an object that you can call, like so:
/* Create it */
var func = function() { /* ... blah ... */};
/* Call it */
var returnVal = func(parameters)
The object here is func. If you call it, what you get back is the return value.
So, in your code:
setInterval(moveCloud(cnt), 100);
you're feeding setInterval the return value of the call moveCloud(cnt), instead of the the function object moveCloud. So that bit is broken.
An incorrect implementation would be:
for(cnt = 0; cnt < cloudCount; cnt++) {
/* ... other stuff ... */
var interval = setInterval(function() {
moveCloud(cnt);
}, 100);
}
Now, you're feeding it a function object, which is correct. When this function object is called, it's going to call moveCloud. The problem here is the cnt.
What you create here is a closure. You capture a reference to the variable cnt. When the function object that you passed to setInterval is called, it sees the reference to cnt and tries to resolve it. When it does this, it gets to the variable that you iterated over, looks at its value and discovers that it is equal to cloudCount. Problem is, does not map on to a Cloud that you created (you have clouds 0 to (cloudCount -1)), so at best, nothing happens, at worst, you get an error.
The right way to go is:
setInterval((function(i){
return function(){
moveCloud(i);
};
})(cnt), 100);
This uses an 'immediate function' that returns a function. You create a function:
function(i){
return function(){
moveCloud(i);
};
}
that returns another function (let's call it outer) which, when called with a value i, calls moveCloud with that value.
Then, we immediately call outer with our value cnt. What this gives us is a function which, when called, calls moveCloud with whatever the value of cnt is at this point in time. This is exactly what we want!
And that's why we do it that way.

Looping setTimeout

I'm currently trying to wrap my head around some JavaScript.
What I want is a text to be printed on the screen followed by a count to a given number, like so:
"Test"
[1 sec. pause]
"1"
[1 sec. pause]
"2"
[1 sec. pause]
"3"
This is my JS:
$(document).ready(function() {
var initMessage = "Test";
var numberCount = 4;
function count(){
writeNumber = $("#target");
setTimeout(function(){
writeNumber.html(initMessage);
},1000);
for (var i=1; i < numberCount; i++) {
setTimeout(function(){
writeNumber.html(i.toString());
},1000+1000*i)};
};
count();
});
This is my markup:
<span id="target"></span>
When I render the page, all I get is "Test" followed by "4".
I'm no JavaScript genius, so the solution could be fairly easy. Any hints on what is wrong is highly appreciated.
You can play around with my example here: http://jsfiddle.net/JSe3H/1/

You have a variable scope problem. The counter (i) inside the loop is only scoped to the count function. By the time the loop has finished executing, is value is 4. This affects every setTimeout function, which is why you only ever see "4".
I would rewrite it like this:
function createTimer(number, writeNumber) {
setTimeout(function() {
writeNumber.html(number.toString());
}, 1000 + 1000 * number)
}
function count(initMessage, numberCount) {
var writeNumber = $("#target");
setTimeout(function() {
writeNumber.html(initMessage);
}, 1000);
for (var i = 1; i < numberCount; i++) {
createTimer(i, writeNumber);
}
}
$(document).ready(function() {
var initMessage = "Test";
var numberCount = 4;
count(initMessage, numberCount);
});
The createTimer function ensures that the variable inside the loop is "captured" with the new scope that createTimer provides.
Updated Example: http://jsfiddle.net/3wZEG/
Also check out these related questions:
What's going on under the hood here? Javascript timer within a loop
JavaScript closure inside loops – simple practical example

In your example, you're saying "2, 3, 4 and 5 seconds from now, respectively, write the value of i". Your for-loop will have passed all iterations, and set the value of i to 4, long before the first two seconds have passed.
You need to create a closure in which the value of what you're trying to write is preserved. Something like this:
for(var i = 1; i < numberCount; i++) {
setTimeout((function(x) {
return function() {
writeNumber.html(x.toString());
}
})(i),1000+1000*i)};
}
Another method entirely would be something like this:
var i = 0;
var numberCount = 4;
// repeat this every 1000 ms
var counter = window.setInterval(function() {
writeNumber.html( (++i).toString() );
// when i = 4, stop repeating
if(i == numberCount)
window.clearInterval(counter);
}, 1000);

Hope this helps:
var c=0;
var t;
var timer_is_on=0;
function timedCount()
{
document.getElementById('target').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}