В javascript я не успеваю остановить свою петлю с clearIntereval для setInterval

Question

У меня есть обратный отсчет, который будет отображать новую piture каждые 5 секунд >> она работает приблизительно, но в конце массива, состоящего из 10 изображений, я не в состоянии остановить отсчет + остановки, чтобы отобразить изображение с clearInterval ...

Мой сценарий

<script> 
     var myImage = document.getElementById ("mainImage"); 
     var imageArray = ["img/lunge.png", 
         "img/plank.png", 
         "img/push-up-and-rotation.png", 
         "img/push-up.png", 
         "img/side-plank-left.png", 
         "img/side-plank-right.png", 
         "img/squat.png", 
         "img/step-up-onto-chair.png", 
         "img/triceps-dip-on-chair.png", 
         "img/wall-sit.png"] 
     var imageIndex = 0; 
     $(document).ready(function() { 
      $('#submit').click(function() { 
       $('.timer').circularCountDown() 
       var inter = setInterval (changeImage, 5000); 
       function changeImage() { 
        myImage.setAttribute ("src", imageArray [imageIndex]); 
        document.getElementById("circle").innerHTML = ""; 
        imageIndex++; 
        if (imageIndex >= imageArray.length) { 
         imageIndex =0; 
         } 
        $('.timer').circularCountDown() 
        } 
       function stopinter() { 
        clearInterval (inter); 
       } 
      }) 
     }) 
    </script> 

Любая идея о том, как сделать из улучшить мой сценарий?

Спасибо,

Оливье

Answer 1

imageIndex++; 
if (imageIndex >= imageArray.length) { 
    stopinter(); 
} 

Answer 2

Финлей, я заставить его работать с этим решением:

$('.timer').circularCountDown() 
        for (;i==10;i++) { 
         clearInterval (inter); 
        }