Js Интервал со случайным текстом и изображением

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>

Answer 1

Я думаю, вы хотите сказать, что когда случайная функция дает одно и то же число, каждое изображение имеет display:none, поэтому изображения нет. Вы используете вложенный таймер, и это проблема. Когда случайная функция возвращает тот же индекс, что и предыдущая, вложенный таймер из предыдущего вызова (который меняет display на none) перезаписывает свой атрибут отображения. Если вы просто хотите показать изображение и заголовок, совпадающие с индексом, просто очистите все изображения перед показом нового изображения. Я использовал jQuery, так как вы включили в свой html.

setInterval(function (){
var titles = ["text1","text2","text3","text4"];
var whattitle = Math.floor(Math.random()*((titles.length)));

$(".imagespops").css("display", "none");
$(".imagespops."+titles[whattitle]).css("display", "block");
$("#textoo").html(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 text1" src='http://www.placehold.it/100x50&text=1'>
     <img class="imagespops text2" src='http://www.placehold.it/100x50&text=2'>
     <img class="imagespops text3" src='http://www.placehold.it/100x50&text=3'>
     <img class="imagespops text4" src='http://www.placehold.it/100x50&text=4'>
</div>
   <div class="text-container">
     <div id="textoo"></div>

PS см. Комментарий @ FluffyKitten и запомните его, когда зададите следующий вопрос.