Develop Reference

Loop function to run 25 times but at 2 second interval

I have the following function to open an iframe , i need to run this function 25 times and open 25 iframes with different url parameter paths.
After the function is ran , i will get some content , then close the iframe , then reopen a new iframe using a url with the next parameter of "SEQNO=100" , to 101 , 102 etc all the way to 124.
How can i get this to work , i tried setting a loop but it opened all frames at same time
function backupMSG() {
// OPEN NEW IFRAME EACH TIME FUNCTION RUNS - ITERATE "SEQNO=100 to SEQNO+125"
$('body').append("<iframe src='" + baseURLDynamic + "/" + year + "/csetup?L=" + league_id + "&C=HMPGMSG&SEQNO=100&PRINTER=1' id='iframe'></iframe>");
$('body').append("<iframe src='" + baseURLDynamic + "/" + year + "/csetup?L=" + league_id + "&C=HMPGMSG&SEQNO=101&PRINTER=1' id='iframe'></iframe>");
$('body').append("<iframe src='" + baseURLDynamic + "/" + year + "/csetup?L=" + league_id + "&C=HMPGMSG&SEQNO=102&PRINTER=1' id='iframe'></iframe>");
// posted 3 urls for example - need to loop over 25 different parameters
$("#iframe").on("load", function () {
// Get some content from iframe
setTimeout(function () {
console.log("Ran 1 Time") // COUNT HOW MANY TIMES HAS THIS FUNCTION RAN
$("#iframe").remove();
}, 600);
setTimeout(function () {
backupMSG(); //RUN FUNCTION 25 TIMES AT INTERVAL OF 2 SECONDS
}, 2000);
});
}
I tried loops like below but both result in console log of all 25 at same time and i want a delay before it loops through the function again
n=25;
for (let i = 0; i < n; i++) {
setTimeout(function () {
console.log("Hi!"+i)
}, 2000);
}
n=25;
setTimeout(function () {
for (let i = 0; i < n; i++) {
console.log("Hi!"+i)
}
}, 2000);

var i=1,n=25;
setInterval(function(){
if(i<=n){
console.log(i);
i++;
}else{
clearInterval();
}
},2000)

function backupMSG(id) {
$("body").append(
"<iframe src='https://picsum.photos/id/" +
id +
"/200/300' id='iframe'></iframe>"
);
$("#iframe").on("load", function () {
setTimeout(function () {
console.log("Run " + id + " Time");
$("#iframe").remove();
}, 600);
});
}
let startId = 1;
let count = 3;
let interval = setInterval(() => {
if (startId >= count) clearInterval(interval)
backupMSG(startId);
startId++;
}, 3000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Executing setTimeout() in loop takes effect only in the first iteration [duplicate]

I'm trying to make a few things scroll down the screen in javascript, however, upon execution, it just says a little and displays everything at once. So it's not clearing with the $("#Menu").html('') function and the setTimeout(function {},500) is just setting a timeout for the entire page instead of the code segment.
var MenuData = [
{'Name':'pictures','x':'30'},
{'Name':'blog','x':'50'},
{'Name':'contact','x':'42'}
]
;
var PositionArray = new Array();
$(document).ready(function () {
for (var count = 0; count < 1000; count++) {
$("#Menu").html('');
if (PositionArray[count] != null) {
PositionArray[count]++;
} else {
PositionArray[count] = 0;
}
setTimeout(function () {
for (var i in MenuData) {
$("#Menu").append('<div style="position:relative; left:' + MenuData[i].x + 'px; top:' + PositionArray[i] + 'px; ">123</div>');
}
}, 500);
}
});
Here's the fiddle: http://jsfiddle.net/LbjUP/
Edit: There was a little bit of error in the code that doesn't apply to the question. Here's the new one: http://jsfiddle.net/LbjUP/1/, I just moved PositionArray[count] to the setTimeout function as PositionArray[i]

As stated in the comments, you are creating 1000 timeouts for 500 ms at the same time - after 500 ms all of them will be executed. What you want is to increase the timeout for every scheduled function:
setTimeout(function() {
// do something
}, count * 500);
However, creating 1000 timeouts at once is not a that good idea. It would be better to use setInterval or call setTimeout "recursively" until a count of 1000 is reached, so that you only have one active timeout at a time.
var count = 0;
function update() {
// do something
if (++count < 1000)
setTimeout(update, 500);
// else everything is done
}
update();
Also, if you intend to create timeouts in a loop, be sure to be familiar with closures and their behavior when accessing counter variables after the loop ran.

Try
function recurse ( cnt ) {
for (var i in MenuData) {
$("#Menu").append('<div style="position:relative; left:' + MenuData[i].x + 'px; top:' + PositionArray[i] + 'px; ">123</div>');
}
if (cnt < 1000){
setTimeout(function () { recurse(cnt + 1); }, 500);
}
}
$("#Menu").html('');
if (PositionArray[count] != null) {
PositionArray[count]++;
} else {
PositionArray[count] = 0;
}
recurse(0);

You can also use setInterval
let i = 0;
const interval = setInterval(() => {
console.log(i);
i++;
if (i >= 10) {
clearInterval(interval);
}
}, 1000);`

Displaying image from array in Javascript in setTimeInterval method

I am having little bit difficulty time pausing the image, so it gets rendered. I have images stored in even index in an array (for example: 2, 4, 6). And using for loop, I want to change the image every 2 seconds. On the load of the HTML page, I call onLoad = executeOnLoad() in HTML. The image changes from default to the image that is in sixth index, but after that it is not changing. It stays on that same index although, the console says the i is changing.
function executeOnLoad(){
for(var i = 0; i < 7; i++){
if (i%2 == 0) {
console.log("started.."+i);
displayImage(i);
}
}
}
function displayImage(i){
console.log("displaying...." + i);
document.getElementById("initial_image").src = contentArray[i];
}
window.setInterval("executeOnLoad()", 1000);
This is the console output that repeats every 1 sec but image is not changing:
started..0
displaying....0
started..2
displaying....2
started..4
displaying....4
started..6
displaying....6 < ---- The image here is displayed but, not changing to other..
I appreciate your help. Thanks.

I've created a fiddle for you that shows even numbers.
I've used the if statement instead of the for loop you had because that would run all the loop in one go.
See it working here:
var contentArray = ["0.png","1.png","2.png","3.png","4.png","5.png","6.png","7.png","8.png"]
var i = 0;
var numberOfImagesToDisplay = 6;
var speedOfAnimation = 1000;
function executeOnLoad(){
if(i <= numberOfImagesToDisplay){
if (i%2 == 0) {
displayImage(i);
i = i+2;
} else {
i++;
}
} else {
i=0;
displayImage(i);
}
}
function displayImage(img){
document.getElementById("initial_image").src = "http://www.marcelogil.com/fiddle/jsloop/" + contentArray[img];
}
window.setInterval("executeOnLoad()", speedOfAnimation);
<img src="http://www.marcelogil.com/fiddle/jsloop/0.png" id="initial_image" />

There is no pause in your code. That loop just runs through all of your images and therefore only the last one will "stick".
You can fix this by using settimeout:
console.clear();
document.body.innerHTML = '';
//START
var contentArray = [
'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg',
'https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg',
'https://i.vimeocdn.com/video/552738927_1280x720.jpg',
'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg',
'https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg',
'https://i.vimeocdn.com/video/552738927_1280x720.jpg',
'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg',
'https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg',
'https://i.vimeocdn.com/video/552738927_1280x720.jpg',
'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg',
'https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg',
'https://i.vimeocdn.com/video/552738927_1280x720.jpg',
'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg',
'https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg',
'https://i.vimeocdn.com/video/552738927_1280x720.jpg',
'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg',
'https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg',
'https://i.vimeocdn.com/video/552738927_1280x720.jpg',
'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg',
'https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg',
'https://i.vimeocdn.com/video/552738927_1280x720.jpg'
]
var initImg = document.createElement("img");
initImg.id = "initial_image";
initImg.src = '';
document.body.appendChild(initImg);
function executeOnLoad() {
for (var i = 0; i < 7; i++) {
if (i % 2 == 0) {
(function (a) {
setTimeout(function () {
console.log("started.." + a);
displayImage(a);
}, 1000 * (a + 1))
})(i);
}
}
}
function displayImage(i) {
console.log("displaying...." + i, contentArray[i]);
document.getElementById("initial_image").src = contentArray[i];
}
executeOnLoad();

See this code, with some small changes. The interval does not have a loop inside it, but a single action. Each time the setInterval callback is called (i.e every one second) it goes one step further, until reaching the maximum desired length (which is 7, but should probably be contentArray.length) and then the interval clears itself. Clearing the interval is possible thanks to saving a refernce to it when declaring it (var interval = window.setInterval(...) and using the clearInterval method.
var i = 0, interval;
function executeOnLoad(){
i++;
if (i%2 == 0) {
console.log("started.."+i);
displayImage(i);
}
if (i >= 7) {
clearInterval(interval);
}
}
function displayImage(i){
console.log("displaying...." + i);
document.getElementById("initial_image").src = contentArray[i];
}
interval = window.setInterval(executeOnLoad, 1000);

Check this:
var i = 0;
var contentArray = [];
contentArray.push('https://img.utdstc.com/icons/256/beautiful-life-quotes-android.png');
contentArray.push('https://img.utdstc.com/icons/monospace-android.png');
contentArray.push('https://img.utdstc.com/icons/cloud-print-android.png');
contentArray.push('https://img.utdstc.com/icons/120/desire-the-game-for-couples-android.png');
function displayImage(){
console.log("displaying...." + i);
if(i < ((contentArray.length) - 1)){
i++;
}else{
i = 0;
}
document.getElementById("initial_image").src = contentArray[i];
window.setTimeout( displayImage, 4000);
}
displayImage();
<img id="initial_image"/>
See a working example on JSFiddle

Reduce setTimeout time relative to time left

I'm making a random "spinner" that loops through 8 divs and add a class active like this:
https://jsfiddle.net/9q1tf51g/
//create random setTimeout time from 3sec to 5sec
var time = Math.floor(Math.random() * (5000 - 3000 + 1)) + 3000;
var exit = false;
function repeat(){
//my code
if(!exit){
setTimeout(repeat, 50);
}
}
My problem is, I want the function repeat to end slowly, to create more suspense. I think I can do this by raising the 50 from the timeout but how can I do this accordingly to the time left?
Thanks in advance!

You can try this.
$('button').on('click', function(){
var time = Math.floor(Math.random() * (5000 - 3000 + 1)) + 3000;
var anCounter = 1;
var anState = "positive";
var exit = false;
//var time1 = 50000;
setInterval(function(){time = time-1000;}, 1000);
function repeat(){
if(anCounter>7 && anState=="positive"){ anState="negative"}
if(anCounter<2 && anState=="negative"){ anState="positive"}
$('div[data-id="'+anCounter+'"]').addClass('active');
$('div').not('div[data-id="'+anCounter+'"]').removeClass('active');
if(anState=="positive"){anCounter++;}else{anCounter--;}
if(!exit){
if(time <1000)
setTimeout(repeat, 300);
else if(time< 2000)
setTimeout(repeat, 100);
else setTimeout(repeat, 50);
}
}
repeat();
setTimeout(function(){
exit=true;
},time);
});

Once you know that you need to exit the flow (exit is true ) you can trigger some animation by creating a dorm linear serials of you code. Usually this animation should not last more than 2 sec.

You were kind of on the right track but it'd be easier to check the time you've passed by and increment accordingly at a fixed rate. I set it to increase by 50ms every iteration but you could change that to whatever you like.
Fiddle Demo
Javascript
$('button').on('click', function() {
var time = Math.floor(Math.random() * (5000 - 3000 + 1)) + 3000;
var anCounter = 1;
var anState = "positive";
var elapsed = 0;
var timer;
function repeat(timeAdded) {
if (anCounter > 7 && anState == "positive") {
anState = "negative"
}
if (anCounter < 2 && anState == "negative") {
anState = "positive"
}
$('div[data-id="' + anCounter + '"]').addClass('active');
$('div').not('div[data-id="' + anCounter + '"]').removeClass('active');
if (anState == "positive") {
anCounter++;
} else {
anCounter--;
}
if (elapsed < time) {
timer = setTimeout(function() {
repeat(timeAdded + 50);
}, timeAdded);
elapsed += timeAdded;
}
else {
clearTimeout(timer);
}
}
repeat(0);
});

You can add a parameter called intTime to your function repeat and inside that function you can adjust the next timeout and call the repeat function with the new timeout. each time it gets called it will take 20 ms longer. however you adjust the increment by changing the 20 in
var slowDown=20; to a different number.
var slowDown=20;
setTimeout ("repeat",50);
function repeat(intTime){
//my code
if(!exit){
intTime=Math.floor (intTime)+slowDown;
setTimeout(repeat(intTime), intTime);
}
}
And then you will need to create another timeout for the exit.
var time = Math.floor(Math.random() * (5000 - 3000 + 1)) + 3000;
var exit = false;
setTimeout ("stopSpinning",time);
function stopSpinning(){
exit = true;
}
so the whole thing should look something like this
var slowDown=20;
var time = Math.floor(Math.random() * (5000 - 3000 + 1)) + 3000;
var exit = false;
setTimeout ("stopSpinning",time);
setTimeout ("repeat",50);
function repeat(intTime){
//my code
if(!exit){
intTime=Math.floor (intTime)+20;
setTimeout(repeat(intTime), intTime);
}
}
function stopSpinning(){
exit = true;
}

Fiddle Demo
Linear deceleration: //values are just an example:
add a var slowDown = 0; inside the click event handler
add slowDown += 1; inside the repeat function
pass 50+slowDown to setTimeout
Curved deceleration:
add a var slowDown = 1;and a var curveIndex = 1.05 + Math.random() * (0.2); // [1.05-1.25)inside the click event handler
add slowDown *= curveIndex; inside the repeat function
pass 50+slowDown to setTimeout

Javascript array is not recognizing called variable

function slideShow() {
var pageSplash = document.getElementById('splash');
var image = ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg"];
var i = 0;
while (i <= image.length) {
if (i > image.length) {
i = 0;
}
i += 1;
pageSplash.innerHTML = '<img id ="splashImage" src="file:///C:/JonTFS/JonGrochCoding/Javascript%20Practical%20Test/' + image[i] + '">';
setTimeout('slideShow', 5000);
}
}
I'm unsure why my i variable is not being recognized as the i variable from the rest of the function, so when ever I try to run my while loop it get's an error message saying that it's undefined.

I think you want setInterval instead of setTimeout, and you want you be careful that you increment i after you you update innerHTML.
function slideShow() {
var pageSplash = document.getElementById('splash');
var image = ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg"];
var i = 0;
setInterval(function () {
if (i === image.length) {
i = 0;
}
pageSplash.innerHTML = '<img id ="splashImage" src="file:///C:/JonTFS/JonGrochCoding/Javascript%20Practical%20Test/' + image[i] + '">';
i++;
}, 5000)
}
slideShow();

You don't need a while loop. You don't need to reset i. You don't need to set innerHTML.
Click Run code snippet... to see how this works. More explanation below the code
function slideShow(elem, images, delay, i) {
elem.src = images[i % images.length];
setTimeout(function() {
slideShow(elem, images, delay, i+1);
}, delay);
}
// setup slideshow 1
slideShow(
document.querySelector('#slideshow1 img'), // target element
[ // array of images
'http://lorempixel.com/100/100/animals/1/',
'http://lorempixel.com/100/100/animals/2/',
'http://lorempixel.com/100/100/animals/3/',
'http://lorempixel.com/100/100/animals/4/',
'http://lorempixel.com/100/100/animals/5/',
'http://lorempixel.com/100/100/animals/6/'
],
1000, // 1000 ms delay (1 second)
1 // start on slide index 1
);
// setup slideshow 2
slideShow(
document.querySelector('#slideshow2 img'), // target element
[ // array of images
'http://lorempixel.com/100/100/nature/1/',
'http://lorempixel.com/100/100/nature/2/',
'http://lorempixel.com/100/100/nature/3/',
'http://lorempixel.com/100/100/nature/4/',
'http://lorempixel.com/100/100/nature/5/',
'http://lorempixel.com/100/100/nature/6/'
],
500, // 500 ms delay
1 // start on slide 1
);
#slideshow1, #slideshow2 {
width: 150px;
display: inline-block;
}
<div id="slideshow1">
<h2>Animals</h2>
<p>(1000 ms delay)</p>
<!-- initial image -->
<img src="http://lorempixel.com/100/100/animals/1/">
</div>
<div id="slideshow2">
<h2>Nature</h2>
<p>(500 ms delay)</p>
<!-- initial image -->
<img src="http://lorempixel.com/100/100/sports/1/">
</div>
This is a huge improvement because your slideshow function is reusable. It means you can use the same function for any slideshow you want. You can even run multiple slideshows on the same page, as I have demonstrated here.

As others have pointed out, the while loop is unnecessary and, as I pointed out, the setTimout was incorrectly written. The following simplifies your code significantly:
var i = 0;
function slideShow() {
var pageSplash = document.getElementById('splash');
var imageArray = ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg"];
if(i < imageArray.length) {
pageSplash.innerHTML = '<img title='+ imageArray[i] + ' id ="splashImage" src="file:///C:/JonTFS/JonGrochCoding/Javascript%20Practical%20Test/' + imageArray[i] + '">';
}
i++;
}
setInterval(slideShow, 2000);
See: https://jsfiddle.net/dauvc4j6/8/ for a working version.

setTimeout calls the function again so you're re-initializing i to 0 every time you call it. Since you can use setTimeout to call the function recursively you don't need the while loop. Pull i out of the function altogether and make it a global variable.
//i should be global
var i = 0;
function slideShow() {
var pageSplash = document.getElementById('splash');
var image = ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg"];
if (i >= image.length) {
i = 0;
}
i += 1;
pageSplash.innerHTML = '<img id ="splashImage" src="file:///C:/JonTFS/JonGrochCoding/Javascript%20Practical%20Test/' + image[i] + '">';
//set timeout is going to call slideShow again so if it's in the function it will call recursively, if you wanted to stop after a certain point you could nest setTimeout in an if
setTimeout(slideShow, 5000);
}
//you need to initially call the function
slideShow();