Goal:
Photo slider where you can toggle between different subreddits and view recent photos which have been posted.
Issue:
When you select one subreddit (via dedicated button) and scroll through a few photos (forward and/or back) all works fine, however if you then choose a different subreddit (via dedicated button) and scroll through a few photos (forward and/or back) the photos from the prior/first subreddit you previously selected flicker in and out at seemingly random intervals. I have watched console while this happens and src url for whatever photo that flickers in/out never enters the img element (unless its happening too fast to catch), instead the src url goes directly to the expected image. Also, I am console logging the array of image urls as the sub is selected via click and there is no abnormalities (all the photo links in the array are from the correct subreddit and in the correct order).
What I have tried:
Moving the empty array var into the loop itself and the if statement, moving the counter variable into the functions themselves, as well as wrapping the entire click function in a separate function. None of these attempts made any difference.
JS:
function reply_click(clicked_id) {
var trys = [];
var title = document.getElementById("red-sub");
title.innerHTML = clicked_id;
$.getJSON("https://www.reddit.com/r/"+ clicked_id +"/.json", function(result){
for (var i = 0; i < result.data.children.length; i++) {
var imagesOnly = result.data.children[i].data;
if(imagesOnly.thumbnail !== 'self' && imagesOnly.post_hint === 'image'){
var items = result.data.children[i].data.url;
trys.push(items);
console.log(items);
var s = 0; // Start Point
function setImage(){
document.slide.src = trys[s];
}
setImage();
function changeImg(){
// Check If Index Is Under Max
if(s < trys.length - 1){
// Add 1 to Index
s++;
} else {
// Reset Back To O
s = 0;
}
setImage();
}
function changeBack(){
if(s < trys.length - trys.length + 1){
s = trys.length -1;
} else {
s--;
}
setImage();
}
}
}
console.log(trys);
document.getElementById ("btngo").addEventListener ("click", changeImg, true);
document.getElementById ("btnback").addEventListener ("click", changeBack, true);
});
}
document.getElementById("cats").addEventListener ("click", function(event)
{reply_click(event.target.id);;
});
document.getElementById("architecture").addEventListener ("click", function(event)
{reply_click(event.target.id);
});
HTML:
<body>
<div class="container">
<div class="entry-header">
<h1>subreddit slide shows</h1>
<p>Click the buttons below to browse through the latest photos of each noted subreddit.</p>
</div>
<div class="red-buttons">
<button id="cats">cats</button>
<button id="architecture">architecture</button>
</div>
<div class="main">
<div class="main_cat">
<div class="main_section">
<h2>r/<span id="red-sub">?????</span></h2>
<div class="img_container">
<img name="slide" class="cat_img" style=""
src="https://cdn.worldvectorlogo.com/logos/reddit-2.svg" />
</div>
<div class="button_base">
<button id="btnback"><</button>
<button id="btngo">></button>
</div>
</div>
</div>
</div>
</div>
</body>
question from:
https://stackoverflow.com/questions/65850003/random-images-flickering-during-slideshow-using-reddit-json-api 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
