We Keep Coding

Conditional Statements Array Looping

I'm trying to create an image slider for a website, I want to learn why my array won't go back to zero after finishing the first iteration and keep on iterating. I want the slider to iterate on and on automatically.
function run() {
for (let i = 0; i < imgArray.length; i++) {
(function(e) {
setTimeout(function() {
if (i == imgArray.length) {
i = 0;
}
imgContainer.style.background = imgArray[i];
}, 3000 * e);
})(i);
};
imgContainer.style.height = '100vh';
}

The condition i == imgArray.length inside the loop is never true, since the loop runs until i < imgArray.length. You could use <= instead as Ali Abug Hijleh suggested, but I think it would be easier to maintain if you explicitly show the loop should run forever with while (true) and use the % operator to get the right index:
function run() {
let i = 0;
while (true) {
(function(e) {
setTimeout(function() {
imgContainer.style.background = imgArray[i % imgArray.length];
}, 3000 * e);
})(i);
};
imgContainer.style.height = '100vh';
++i;
}

i will never reach the imgArray.length because the loop only works when i is less than imgArray.length (since you use i < imgArray.length as the condition)
Try if (i == imgArray.length -1) { ... } instead.

That's because your for loop ends before you reset it to zero because you reset it to zero inside a setTimeout

javascript counter using for loop

I've created a simple counter using javascript but there is a problem Field "display" starts from 1, but it should start from 100 and goes low. The console logs shows values correctly from 100 to 1.
I have to use loops to do this tasks, so please not replace it using recursion :) Also the timeout is for sure does not equal to 100ms, it's more
function wyswietlLiczbe(j) {
setTimeout(function() {
document.getElementById("display").innerHTML = j;
}, 100);
}
for (var i= 100; i > 0; i--){
console.log(i)
wyswietlLiczbe(i);
}
<p id="display"></p>

Since the loop executes immediately, you need to wait an increasing amount of time for each number. This will queue up the innerHTML modifications.
As it is now, after a 100ms wait all 100 wyswietlLiczbe are executed in rapid succession.
function wyswietlLiczbe(j, waitTime) {
setTimeout(function() {
document.getElementById("display").innerHTML = j;
}, waitTime);
}
for (var i= 100; i > 0; i--){
console.log(i)
wyswietlLiczbe(i, (101 - i) * 100);
}
<p id="display"></p>

Build the conditional into the function which will execute after the timeout.
var elmD = document.getElementById("display");
function wyswietlLiczbe(j) {
setTimeout(function() {
elmD.innerHTML = j;
j--;
if(0 <= j ) {
wyswietlLiczbe(j)
}
}, 100);
}
wyswietlLiczbe(100);

I don't know exactly what you want but I think this is what you're looking for.
function wyswietlLiczbe(j) {
if (j >= 0) {
setTimeout(function() {
document.getElementById("display").innerHTML = j;
j--;
wyswietlLiczbe(j);
}, 100);
}
}
wyswietlLiczbe(100);
<p id="display"></p>

you can use setInterval instead
function wyswietlLiczbe(j) {
x = setInterval(function() {
if(j==0) clearInterval(x);
document.getElementById("display").innerHTML = j--;
}, 100);
}
wyswietlLiczbe(100);

setTimeout() in cycle, strange behaviour

guys! I am a total newbie in javascript. I wrote my first program and already stuck with it's behavior:
var elements = document.getElementsByTagName("img");
for (var i = 0; i < elements.length; i++) {
if (i % 2 == 0) {
elements[i].src = "img.jpg";
for (var j = 0; j <= 1; j += 0.1) {
setTimeout(increase_opacity(elements[i], j), 2000);
// setTimeout(alert(j), 2000);
}
}
}
function increase_opacity(element, opacity) {
element.style.opacity = opacity;
}
I can not see that opacity changes, but under debugger it does, so setTimeout just doesn't work. If I uncomment // setTimeout(alert(j), 2000); I can see both opacity change and alert message on every cycle step. Why is that?

setTimeOut accepts a function, and what you were doing is passing it the result of a call to increase_opacity. Code below should work for you. Notice how increase_opacity is wrapped inside of the anonymous function definition.
var elements = document.getElementsByTagName("img");
for (var i = 0; i < elements.length; i++) {
if (i % 2 == 0) {
elements[i].src = "img.jpg";
for (var j = 0; j <= 1; j += 0.1) {
(function(element, opacity) {
setTimeout(function() { increase_opacity(element, opacity) } , 2000);
})(elements[i], j);
// setTimeout(alert(j), 2000);
}
}
}
Here is the doc on setTimeOut http://www.w3schools.com/jsref/met_win_settimeout.asp

You need to pass a function to setTimeout(). What you are doing is calling increase_opacity immediately and then passing the return value to setTimeout().
Since you want to call the function with particular arguments, you can use a closure to record the current values of i and j:
setTimeout((function(a, b) {
return function() {
increase_opacity(a, b);
};
})(elements[i], j), 2000);

Are you aware that setTimeout() is not a blocking call? Your script does not stop at the setTimeout() function, but continues its execution. So here's what's happening here:
1) Your code starts the loop;
2) When it enters a setTimeout(), it launches the timer it and goes ahead;
3) Repeat step 2 for every element; (Please note that steps 2 and 3 are executed in a few ms)
4) All the timers expires, all the instructions are executed all at once.
To avoid this, you should write something like:
var elements = document.getElementsByTagName("img");
for (var i = 0; i < elements.length; i++) {
if (i % 2 == 0) {
elements[i].src = "img.jpg";
setTimeout(function(){increase_opacity(elements[i],0);}, 2000);
}
}
function increase_opacity(element, opacity) {
element.style.opacity = opacity;
if (opacity < 1) setTimeout(function(){increase_opacity(element, opacity+0.1);},2000);
}
NB: When dealing with setTimeout() you should avoid that notation when calling function with parameters. You should always use this:
setTimeout(function(){yourFunctionName(arg1, arg2, arg3);});
NB 2: setTimeout(alert(j),2000); is not even waiting 2 seconds to appear. Like I said above, you should use the anonymous function when dealing with setTimeout(). It's probably giving the impression it's working because of this, but it's a sort of glitch IMO.

Delay in for loop

I´m having trouble to delay a function in a for-loop.
So here is my test:
<script type="text/javascript">
var j = 0;
for(var i = 0; i <= 100; i++){
setTimeout(function(){
console.log(i);
},j*2);
j++;
}
</script>
I want that every count will appear step by step with a delay in the console. But currently only 101 appears 101 times. Why and what is a better solution?
Cheers

JavaScript doesn't have block level scoping of variables, so the value of i in any deferred functions will be the last value of i from the loop (in your case, 101). You can either use a named function or an immediately invoked function expression to create a closure that gives the value the correct scope.
<script type="text/javascript">
var j = 0;
for(var i = 0; i <= 100; i++){
(function(i) {
setTimeout(function(){
console.log(i);
},j*2);})(i);
j++;
}
</script>
Also bear in mind that the second argument passed to setTimeout is the delay in milliseconds, so that's a very short delay (a tiny fraction of a second) between each call.

function SetTimeoutLoop(i) {
setTimeout(function() { console.log(i); }, i*2);
}
for(var i = 0; i <= 100; i++){
SetTimeoutLoop(i)
}
JSFIDDLE

u may try this:
<script type="text/javascript">
var j = 0;
for(var i = 0; i <= 100; i++){
(function(i, j){
setTimeout(function(){
console.log(i);
},j*2);
})(i, j);
j++;
}
</script>

It happens as once your callback starts to fire your loop would be finished and the value will be max.
you can do like
(function me(i,j) {
if(i <= 10) {
setTimeout(function(){
alert(i++);
me(i,j);
},j++*2);
}
})(0,0);
Here is a sample fiddle.

You can't do that in for loop, instead you should use a recursive function like this:
here's a fiddle
var j = 0;
var i=0;
setTimeout(function(){
log_i(i);
},j*2);
function log_i(i){
console.log(i);
i++;
if(i<=100){
setTimeout(function(){ log_i(i); },j*2);
}
j++;
}

Can't call a function through setTimeout

I'm trying to make a few functions to work one after the other with a waiting time of 1.5 seconds between them.
NOW, when i try doing so with the same Id (Inside the "NoteList(>here<)", like 1, 2, 3, or any other, it works;
for (var i = 0; i < 36; i++)
{
setTimeout(function () { OnClcRandom(NoteList[0]) }, i * 1000 + 1000);
}
BUT! when i try doing so with the var i, it doesn't work and gets the all of the functions in the page stuck. any idea why?
for (var i = 0; i < 36; i++)
{
setTimeout(function () { OnClcRandom(NoteList[i]) }, i * 1000 + 1000);
}

That would be because all of the functions refer to the same live i variable, not the value of the variable at the time you called setTimeout(). Which means by the time the timeouts actually run your function i will be 36.
Try this instead:
for (var i = 0; i < 36; i++) {
(function(x){
setTimeout(function () { OnClcRandom(NoteList[x]) }, i * 1000 + 1000);
)(i);
}
This executes an anonymous function on each iteration of the loop, with each execution getting its own x parameter for use in your original function.

Javascript doesn't create local scope for block. :)
And in your second example var i equal 36 (last value).
You need create local scope inside loop.
for (var i = 0; i < 36; i++) {
(function (i) {
setTimeout(.......);
}(i))
}
You also may fixed 'i' value assign it to function property:
for (var i = 0, f; i < 36; i++){
f = function _callback() { var i = _callback.i; .....};
f.i = i;
setTimeout(f, i * 1000);
}