Random images flickering during slideshow using reddit json api

I have been grappling with this issue for a week now and can’t seem to find a solution. Any direction is appreciated.

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);    

   }
  }  
 console.log(trys);  

  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(); 
  }

 document.getElementById ("btngo").addEventListener ("click", changeImg, true);
 document.getElementById ("btnback").addEventListener ("click", changeBack, true);

 });
 }

$(document).on('click', '.subr', function () {
    reply_click(this.id)
});

Codepen:
Link

Please use codepen and create a runnable example (or at least post the full code, i.e. with HTML).

Apologies. Edited original post with codepen link at bottom now.

The problem is with click event listeners - you’re adding new event listener every time the subreddit button is clicked which leads to each click calling all previous event listeners.

Is there an alternate method you can recommend? Previously I tried moving them outside the click function but obviously they can’t access the array. I also attempted to use localstorage and no success there either.

Doing a bit more research, my other thought is to try unbinding the previous click events at the beginning of the function. Going to try when back at computer.

You need to move outside not only functions, but also variables. Something like this: https://codepen.io/jenovs/pen/ZEpNwzw?editors=0010

1 Like

thank you very much. going to study this up to see where I went wrong in my approach.