I am creating a slideshow using a javascript. I have created a loop that is responsible for changing the css of my slideshow. I want this loop to be endless since I want to change the slides after every set interval.
However, the endless loop is causing my whole website to hang and crash. I want to know if there is an alternative approach to this that doesn't cause my whole page to crash?
async function startSlideShow(slideshow, leftPos, timer) {
let slideContainer = slideshow.children[0];
//How to handle this
let index = 0;
do {
if (index === (leftPos.length - 1)) {
index = 0;
} else {
changeSlide(index);
index++;
}
} while (true);
function changeSlide(index){
setTimeout(function(){
slideContainer.style.left = "-" + leftPos[index] + "px";
console.log("-" + leftPos[index] + "px");
}, timer * index)
}
}
Try setInterval, it calls a function continuously by default. Just put all your counter update stuff inside the interval function.
function startSlideshow(slideshow, leftPos, timer) {
let slideContainer = slideshow.children[0];
let index = 0;
setInterval(
function () {
slideContainer.style.left = "-" + leftPos[index] + "px";
console.log("-" + leftPos[index] + "px");
index = (index + 1) % leftPos.length;
// for the range of values index can be, this is equivalent to
// index = index + 1;
// if (index == leftPos.length) index = 0;
}, timer
);
}
a % b gives you the remainder when you divide a by b. This gives you a when a < b, and then 0 when a == b. More info
Read the comments in the code!
/* Don't need to be `async` */
function startSlideShow(slideshow, leftPos, timer) {
/* Commenting out to get a working example
let slideContainer = slideshow.children[0];
*/
let index = 0;
/* You have to start manually, it will call itself later (see bellow) */
loopThroughSlides();
function loopThroughSlides() {
if (index === (leftPos.length - 1)) {
/* You should call `changeSlide` here as well */
changeSlide(index);
index = 0;
} else {
changeSlide(index);
index++;
}
/* Calling itself after timeout, this makes it endless */
setTimeout(loopThroughSlides, timer /* Don't need to multiply with `index`) */);
}
function changeSlide(index){
/* Keep the original code, but I replace it with another for demonstarting
slideContainer.style.left = "-" + leftPos[index] + "px";
console.log("-" + leftPos[index] + "px");
*/
/* Demonstration code */
console.log(leftPos[index]);
}
}
/* Calling the function */
startSlideShow(null, ['What', 'is', 'leftPos?'], 1000)
Related
I have an array that is constantly being updated, and needs to display the items in the array 5 at a time. Sometimes there are more than 5 elements in the array, sometimes there are less. If there are more than 5 elements in the array, then I need to cycle them 5 at a time. For example, if there are 10 elements, I want to fade in 1-5, then fade out 1-5, then fade in 5-10. I have this working, and updating, however, if there are only 4 news articles available after the data update, it still fades in and out 1-4, over and over. I need to always fade in the first articles, and if there are less than the numberToShow, don't fade out, just update.
I have tried clearInterval, but that stops updating. I tried .stop().fadeOut(); but then the fade in keeps occurring. I tried .stop().fadeOut(); with .stop().fadeIn(); but the data never fades in. Should I pass the array in to display it, and cycle in there?
For testing, this is simulated with using the date. Every 8 seconds it should update the the data with an updated number. If there are 4 articles, fade in, and update the Date.now() number, but never fade out. If there are 10 articles, fade in and update each cycle.
var numberToShow = 5;
var newsArray = [];
var startRow = 0;
var endRow = 0;
function getData() {
// Simulate the data changing using date.
newsArray = [Date.now(), "News article 1", "News article 2", "News article 3", "News article 4",
"News article 5", "News article 6", "News article 7", "News article 8", "News article 9"];
showNews(numberToShow);
}
// Fade out the results for the next cycle
setInterval(function() {
$("span.text").fadeOut({
duration: 800
});
setTimeout(
function() {
getData();
},
(800)
);
}, 8000);
// Update the data
function updateData() {
getData();
setTimeout(updateData, 6000);
}
// Display the results
function showNews() {
if (endRow >= newsArray.length) {
startRow = 0;
}
endRow = startRow + numberToShow;
if (endRow >= newsArray.length) {
endRow = newsArray.length;
}
var results = "";
for (var k = startRow; k < endRow; k++) {
results += "<span class='text' style='display:none;'>" + newsArray[k] + "</span><br>";
}
startRow = startRow + numberToShow;
document.getElementById('showResults').innerHTML = results;
$("span.text").fadeIn({
duration: 800
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="showResults"></div>
While previous answer works fine - this one could be more like the case in your description...
Short description of the idea:
show list or the part of it.
if list is longer - repeat (go to step 1 in a couple of secs to show another part of the list)
when update comes - anytime - start again with new array
And working example (removed unneeded code and added button to help with tests):
var
numberToShow = 5,
newsArray = [],
startRow = 0,
endRow = 0,
$results = $("#showResults"),
timer;
function getData() {
// Simulate the data changing
newsArray = [Date.now()];
// add random number of items
var j = Math.floor(Math.random()*7)+1;
for(var i=0; i<j; i++){
newsArray.push('News article '+i);
}
// add one more item named "last"
newsArray.push('Last News article');
startCycle();
}
function startCycle() {
startRow = 0;
endRow = 0;
$results.fadeOut(800, function(){
renderList();
});
}
function renderList() {
if (endRow >= newsArray.length) {
startRow = 0;
}
endRow = startRow + numberToShow;
if (endRow > newsArray.length) {
endRow = newsArray.length;
}
var results = "";
for (var k = startRow; k < endRow; k++) {
results += "<span class='text'>" + newsArray[k] + "</span><br>";
}
startRow = startRow + numberToShow;
$results.html(results);
$results.fadeIn(800, function(){
nextCycle();
});
}
function nextCycle() {
// start cycling only if there is more results to be shown
if(newsArray.length > numberToShow){
timer = setTimeout(function(){
$results.fadeOut(800, function(){
renderList();
});
}, 4000);
}
}
// update on request
function updateData() {
clearTimeout(timer);
$results.stop();
getData();
}
// add button for tests
$results.before(
$('<button/>').text('Update now').click(function(){
updateData();
})
)
getData();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="showResults"></div>
Ok - not sure what exactly you tried to do - but you will easily change my code into anything you need
...lets start with clear algorithm:
getData
fade out if list is visible ...then continue to step 3.
render next portion of items from array
fade in if list is not visible ...then go to step 5.
wait a while...
check if all items has been shown (if not - show next portion with step 2, if so - update data with step 1)
hope the the code will give you a chance to adopt it to your needs:
var
numberToShow = 5,
newsArray = [],
startRow = 0,
endRow = 0,
$results = $("#showResults"),
visible = false,
timer;
function fadeInIfNeeded(callback) {
var is_visible = visible;
visible = true;
if(is_visible){
callback();
}else{
$results.fadeIn(800, callback);
}
}
function fadeOutIfNeeded(callback) {
var is_visible = visible;
visible = false;
if(is_visible){
$results.fadeOut(800, callback);
}else{
callback();
}
}
function getData() {
// Simulate the data changing
newsArray = [Date.now()];
// add random number of items
var j = Math.floor(Math.random()*6)+2;
for(var i=1; i<j; i++){
newsArray.push('News article '+i);
}
// add one more item named "last"
newsArray.push('Last News article');
startCycle();
}
function startCycle() {
startRow = 0;
endRow = 0;
fadeOutIfNeeded(function(){
renderList();
});
}
function renderList() {
if (endRow >= newsArray.length) {
startRow = 0;
}
endRow = startRow + numberToShow;
if (endRow > newsArray.length) {
endRow = newsArray.length;
}
var results = "";
for (var k = startRow; k < endRow; k++) {
results += "<span class='text'>" + newsArray[k] + "</span><br>";
}
startRow = startRow + numberToShow;
$results.html(results);
fadeInIfNeeded(function(){
nextCycle();
});
}
function nextCycle() {
// every portion of data will be seen for 6 + 0.8 + 0.8 = 7.6 sec
timer = setTimeout(function(){
if(startRow >= newsArray.length){
// if all items has been shown - get new data (update)
getData();
}else{
// if there is more to show - fade out and render
fadeOutIfNeeded(function(){
renderList();
});
}
}, 6000);
}
getData();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="showResults"></div>
Here is a modern view of how to implement your use case. Please note there
is not a single global variable and all DOM changes (side effects) occur in a single function.
You describe a constantly changing array. This code produces that array of integers
with one remarkable difference. After the data is set/retrieved, a Custom Event
is produced and fired. That event carries the changed/updated array.
function newData(data) { // Random size of array (between 1-15)
const previousLength = data.length;
// ~50% of the time the array grows, otherwise it shrinks
data.length = (Math.random() > .5)?
data.length + Math.ceil(Math.random() * (7 - 1) + 1) :
Math.ceil(Math.random() * (4 - 1) + 1);
for (let i = previousLength; i < data.length; i++) {
data[i] = Math.ceil(Math.random() * (15 - 1) + 1);
}
let dataEvent = new CustomEvent('gotData', { detail: data});
document.getElementById('showResults').dispatchEvent(dataEvent);
}
Your question describes what is the need for a custom iterator that provides no more than 5
array elements for each iteration. The following code provides a Generator function that follows
JavaScript's iterator protocol by returning a result with a .value property
containing an array of no more than 5 elements and a .done property containing a Boolean indicating if there
is no futher data. The yield statement returns data or the return statement results in
.done being set to true to indicate there is no further data. (see the MDN articles for details)
function* nextSet(data = [], numberToShow = 5) {
let current = [];
let currentStart = 0;
while (true) {
[current] = [data.slice(currentStart, currentStart + numberToShow)];
if (currentStart < data.length) {
yield current;
} else {
return;
}
currentStart += numberToShow;
}
}
With the data and iterator in place this code starts off the procession. Set up
an event listener for the custom event, then get some mock data (starting with an
empty array):
document.getElementById('showResults').addEventListener('gotData', doDOM);
newData([]);
All the DOM work is done in the event callback function below (doDOM()).
First create an iterator from the Generator Function.
Then start the interval timer so that we can repeatedly call .next() on the iterator.
Please note how dead-simple the animation actually is with
a bit of rethinking the approach to the entire problem. If result is undefined
then cancel the interval timer, mock more data and repeat the process with the updated array.
function doDOM(event) {
const data = event.detail;
const iterator = nextSet(data); // create iterator from Generator
let text = '';
let page = 0;
let interval = setInterval(()=>{
page++;
let result = iterator.next().value;
if(result) {
text = `Array size: ${data.length} (Page ${page}) -- ${JSON.stringify(result)}`;
// Dead simple animations...
$(event.target).fadeOut(1000, () => {
event.target.innerText = text;
$(event.target).fadeIn(1000);
});
} else {
event.target.innerText += " ----> getting more data..."
// all done, so kill this one
clearInterval(interval);
// Mock new data arrival
newData(data);
return;
}
}, 5000);
}
I do realize this seems to be a mile off from your question. But this answer addresses the whole
puzzle rather than just one bit.
/**
* A Generator function to produce number of data elements
*/
function* nextSet(data = [], numberToShow = 5) {
let current = [];
let currentStart = 0;
while (true) {
[current] = [data.slice(currentStart, currentStart + numberToShow)];
if (currentStart < data.length) {
yield current;
} else {
return;
}
currentStart += numberToShow;
}
}
/**
* CustomEvent Handler - fired when new data is received
*
* DOM manipulations
* All side effects are contained within one function
* #parm Event - contains detail with data
*/
function doDOM(event) {
const data = event.detail;
const iterator = nextSet(data); // create iterator from Generator
let text = '';
let page = 0;
let interval = setInterval(() => {
page++;
let result = iterator.next().value;
if (result) {
text = `Array size: ${data.length} (Page ${page}) -- ${JSON.stringify(result)}`;
// Dead simple animations...
$(event.target).fadeOut(1000, () => {
event.target.innerText = text;
$(event.target).fadeIn(1000);
});
} else {
event.target.innerText += " ----> That's it! Getting more data..."
// all done, so kill this one
clearInterval(interval);
// Mock new data arrival
newData(data);
return;
}
}, 5000);
}
// Array that is either growing or changing on each call
function newData(data) { // Random size of array (between 1-15)
const previousLength = data.length;
// ~50% of the time the array grows, otherwise it shrinks
data.length = (Math.random() > .5) ?
data.length + Math.ceil(Math.random() * (7 - 1) + 1) :
Math.ceil(Math.random() * (4 - 1) + 1);
for (let i = previousLength; i < data.length; i++) {
data[i] = Math.ceil(Math.random() * (15 - 1) + 1);
}
let dataEvent = new CustomEvent('gotData', {
detail: data
});
document.getElementById('showResults').dispatchEvent(dataEvent);
}
document.getElementById('showResults').addEventListener('gotData', doDOM);
newData([]);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script defer src="index.js"></script>
</head>
<body>
<main id="showResults">Welcome! ----> waiting for data...</main>
</body>
</html>
Expand the code snippet to see this work.
I have a div which I want to transition a varying amount of times, one after the other. The new locations of this div has been fed to the movePlayer function via an array called journey. This data is then converted into translate coordinates and set as a style on my div.
I have been trying for days to make a for loop wait until a transitionend event has triggered before continuing through its next iteration. The listenForMoveFinish function is correctly responding only when the transition is complete, but I cannot make the for loop wait for this reply before it charges onto the next iteration.
I've tried disabling rules with inline comments, separating sections of the for loop into separate async functions and moving the level of the promise, but I have no idea how to fix this. Apologies for lack of working code but there are a bunch of functions and an astar path finding library that get me to this point.
Can anyone suggest why this is not working?
function movePlayer(journey) {
let timePlus100 = 100;//removed 'playerInfo.playerSpeed + ' to test
return new Promise((resolve, reject) => {
/* eslint-disable no-await-in-loop */
for (let i = 0; i < journey.length; i++){
(async function(){
try {
let nextX = journey[i].y;//?SWITCHED X AND Y AS ASTAR SWITCHES IN GRAPH
let nextY = journey[i].x;//?SWITCHED X AND Y AS ASTAR SWITCHES IN GRAPH
let fromTop = (26 + (nextX * 16) + (nextY * 16)) + "px";
let fromLeft = (576 + (nextX * 32) - (nextY * 32)) + "px";
let translateXYZ = "translate3d(" + fromLeft + ", " + fromTop + ", 0px)";
document.getElementById("playerLayer").style.transform = translateXYZ;
moveStatus = await listenForMoveFinish();
if (i === journey.length - 1) {
setTimeout(function(){resolve("complete"); }, timePlus100);
}
} catch (err) {
}
})();
}
/* eslint-enable no-await-in-loop */
})
}
function listenForMoveFinish(){
return new Promise(resolve => {
playerLC.addEventListener('transitionend', function() {
resolve(2);
});
});
}
I'm trying to make a faux loading screen, and I need delays between loading messages of about 20-50ms or so so that people can actually see what's going on before it cuts to the initialized screen. The button that activates this goes to the following function:
function gameinit() {
for (k = 0; k <=1; k += 0.125) {
setTimeout(function () {
var nexttxt = "Loading... " + toString(100 * k) + "%"
}, 20);
displayupdate(nexttxt);
}
}
However this comes up as an incorrect syntax (on JSfiddle - https://jsfiddle.net/YoshiBoy13/xLn7wbg6/2/) when I use JShint - specifically lines four and five. I've looked at the guides for this and everything seems to be in order. What am I doing wrong?
(Note: displayupdate(nexttxt) updates the <p> tags with the next line of text)
When executing the script, nothing happens - the sixteen lines of text on the HTML move up as normal, the top eight being replaced with the eight generated by the gameinit() function, but the gameinit() only generates blank. If the script is executed again, it just outputs eight lines of 112.5% (as if it was the 9th iteration of the for loop).
I'm almost certain it's something elementary that I've missed, could someone please tell me what I've done wrong?
Use setInterval() instead, you can clear interval using clearInterval()
function gameinit() {
displayupdate("Loading... 0%");
var k = 0;
var inter = setInterval(function() {
if (k < 1) {
k += .25;
displayupdate("Loading... " + 100 * k + "%")
} else {
clearInterval(inter);
}
}, 2000);
}
function displayupdate(d) {
console.log(d);
}
gameinit();
here is another function can do this better ---- setInterval
var txt = '';
var time = 0;
var id = setInterval(function(){
console.log("loading..."+time/8*100+"%");
if(time++>7)
clearInterval(id);
},1000);
setTimeout doesn't work as you would expect it to work inside loops. You have to create a closure for each loop variable passed on to setTimeout, or create a new function to execute the setTimeout operation.
function gameinit() {
for (var k = 0; k <= 1; k += 0.125) {
doSetTimeOut(k);
}
}
function doSetTimeOut(k) {
setTimeout(function() {
var nexttxt = "Loading... " + toString(100 * k) + "%"
}, 20);
displayupdate(nexttxt);
}
I'm trying to pass an index of element and slideUp each list item content with delay
here is my code
for(var i = 1; i <= $("#colContainer li").length ; i++) {
var el = $("#colContainer li:nth-child(" + i + ") .colContent");
var delay = function() {
slide(el);
};
setTimeout(delay, 10);
function slide(el){
el.slideUp();
};
};
but every time just the last one slides up
what I expect is they slideUp from index 1 to the end with delay
I also tried this
index = $(this).parent("li").index();
for(var i = 1; i <= $("#colContainer li").length ; i++) {
(function(i) {
var el = $("#colContainer li:nth-child(" + i + ") .colContent");
var delay = function() {
slide(el);
};
setTimeout(delay, 10);
function slide(el){
el.slideUp();
};
})(i);
};
but they all slide at once, i want index 1 slide, after that index 2 and ...
IS THERE ANY WAY WITH FOR LOOP ??
This is because var el is scoped to the function block, not the loop block.
Try something like this:
for( var i=1; ......) { (function(i) {
var el = ...
// rest of your code, unchanged
})(i); }
You need a closure to scope the value of el for each iteration of the loop.
for(var i = 1; i <= $("#colContainer li").length ; i++) {
var el = $("#colContainer li:nth-child(" + i + ") .colContent");
(function(el) {
setTimeout(function(){
el.slideUp();
},10);
})(el);
}
However this will still cause them to all animate at the same time which if that is the desired result, you could just do it all in one step with jQuery.
If you want them to animate one at a time you can do this:
for(var i = 1; i <= $("#colContainer li").length ; i++) {
(function(i) {
var el = $("#colContainer li:nth-child(" + i + ") .colContent");
setTimeout(function(){
el.slideUp();
}, i * 10);
})(i);
}
Did you want them to be queued or for a 10 millisecond delay before they all slide up?
Do you require the for loop?
Wouldn't the following do the latter?
setTimeout(function() {
$("#colContainer li .colContent").slideUp();
}, 10);
Queued slide example:
(function slideContent(index) {
$("#colContainer li:nth-child(" + index + ") .colContent").slideUp();
if ($("#colContainer li:nth-child(" + (index + 1) + ") .colContent").length == 1) {
setTimeout(function() { slideContent(index + 1); }, 250);
}
})(1);
Unless your intention is to have them all animate at the same time, you can't set them up in a loop this way. If you do, they're all executed (almost) simultaneously and as you say, you'll only actually see the last one.
You need to trigger each successive one from the completion of the previous one. Chain them together with callbacks.
delay should set up the next setTimeout. Then you'll get the result you're after.
EDIT
Given the other answers here, I'll add that you'll probably want to increase your pause time from 10ms to something like 100 and then use the *i solution that the others have suggested. Multiplying 10ms by i isn't going to get you a whole lot in the way of noticeable delay. I'd start with 100ms and if that's too jerky move down from there in increments of 10ms till you have an animation that makes you happy.
I have a for loop with a setTimeout function inside of it intended to delay each iteration of the loop. While the rest of the code within the loop is properly iterating, the setTimeout function only works once, as if the for loop was inside of it and not the other way around. Here's my code:
for (x = 0; x <= roll; x ++) {
setTimeout(function() {
space = $(".player." + turn).parents("td").attr("id");
space = parseInt(space);
player = $(".player." + turn);
$(".player." + turn).remove();
nextSpace = space + 1;
$("#" + nextSpace).append(player);
}, 500);
}
Any ideas?
Try this:
setTimeout(function() {
// your code
}, 500 * x);
This is not how setTimeout works. It is not a synchronous delay. If you want to delay each iteration of your loop, you need to instead do this by recursively calling the inner function.
function inner_function(x, max_x) {
space = $(".player." + turn).parents("td").attr("id");
space = parseInt(space);
player = $(".player." + turn);
$(".player." + turn).remove();
nextSpace = space + 1;
$("#" + nextSpace).append(player);
setTimeout(inner_function, 500, x+1, max_x);
}
inner_function(0, 500);