SetInterval со случайным текстом и Img

Question

setInterval(function (){

var titles = ["text1","text2","text3","text4"];

var whattitle = Math.floor(Math.random()*((titles.length)));

setTimeout(function(){$(".imagespops")[whattitle].style.display="none";}, 1000);            

document.getElementById('textoo').innerHTML = titles[whattitle];  

document.getElementsByClassName('imagespops')[whattitle].style.display="block";


      
}, 1000);

.imagespops {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img-container">
     <img class="imagespops" src='http://www.placehold.it/100x50&text=1'>
     <img class="imagespops" src='http://www.placehold.it/100x50&text=2'>
     <img class="imagespops" src='http://www.placehold.it/100x50&text=3'>
     <img class="imagespops" src='http://www.placehold.it/100x50&text=4'>
</div>
   <div class="text-container">
     <div id="textoo"></div>

Я хочу, чтобы мой сценарий не повторялся с предыдущим результатом и всегда отображал изображение и текст, которые должны совпадать друг с другом.

Когда функция вызывает тот же массив, что и раньше, все изображения стиля display: blocked. Я знаю, что решение должно быть очень простым, но я пробовал много всего

Answer 1

Вот go:

const titles = ["text1","text2","text3","text4"];
let titleIndex;

setInterval(function (){
  
  // Get a whattitle different from before
  let whattitle = titleIndex;
  while(whattitle == titleIndex) {
    whattitle = Math.floor(Math.random()*((titles.length)));
  }
  
  // Save the value of whattitle to compare it the next time
  titleIndex = whattitle;
  
  // Hide all images and show the one you want to show
  $(".imagespops").hide().eq(whattitle).show();  

  $('#textoo').text(titles[whattitle]);

}, 1000);

.imagespops {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img-container">
     <img class="imagespops" src='http://www.placehold.it/100x50&text=1'>
     <img class="imagespops" src='http://www.placehold.it/100x50&text=2'>
     <img class="imagespops" src='http://www.placehold.it/100x50&text=3'>
     <img class="imagespops" src='http://www.placehold.it/100x50&text=4'>
</div>
<div class="text-container">
<div id="textoo"></div>
</div>