Как остановить одну функцию, используя другую

Question

Я очень новичок в кодировании, так что несите меня на этом.

В настоящее время я создаю галерею изображений, в которой есть функция автозапуска (это мне удалось создать), однако я не могу понять, как остановить ее, не обновляя страницу. В идеале я хотел бы остановить его, используя другую отдельную функцию, которая вызывает мое первое изображение при нажатии на него.

//Autoplay button// 

function autoPlay() { 
    (function() { 
     var gallery = document.getElementById('gallery'); //Identifying image ID 
     var delayInSeconds = 60; // setting number of seconds to delay images 
     var images = ["Images/1.JPG", "Images/2.JPG", "Images/3.JPG", "Images/4.JPG", "Images/5.JPG", "Images/6.JPG", ]; // list of image names 
     var num = 0; 
     var changeImage = function() { 
      var len = images.length; 
      gallery.src = images[num++]; 
      if (num === len) { 
       num = 0; 
      } 
     }; 
     setInterval(changeImage, delayInSeconds * 50); 
    })(); 
} 
document.getElementById("play").onclick = autoPlay; 

//Stop button// 

function stopButton() { 
    document.getElementById('gallery').src = 'Images/1.JPG'; 
} 
document.getElementById("stop").onclick = stopButton; 

Answer 1

Вы не можете остановить выполнение одной функции из любого места. Но если вы используете setInterval(), вы можете остановить/очистить его с помощью clearInterval().

clearInterval(interval_ID); 

Полный код:

//Autoplay button// 
var intervalVar; 

function autoPlay() { 
    (function() { 
     var gallery = document.getElementById('gallery'); //Identifying image ID 
     var delayInSeconds = 60; // setting number of seconds to delay images 
     var images = ["Images/1.JPG", "Images/2.JPG", "Images/3.JPG", "Images/4.JPG", "Images/5.JPG", "Images/6.JPG", ]; // list of image names 
     var num = 0; 
     var changeImage = function() { 
      var len = images.length; 
      gallery.src = images[num++]; 
      if (num === len) { 
       num = 0; 
      } 
     }; 
     intervalVar = setInterval(changeImage, delayInSeconds * 50); 
    })(); 
} 
document.getElementById("play").onclick = autoPlay; 

//Stop button// 

function stopButton() { 
    clearInterval(intervalVar); 
    document.getElementById('gallery').src = 'Images/1.JPG'; 
} 
document.getElementById("stop").onclick = stopButton; 

Answer 2

Вы можете очистить интервал, asigning первой глобальной переменной:

// your code 
window.varInterval = setInterval(changeImage, delayInSeconds * 50); 
// your code 

function stopButton(){ 
    clearInterval(varInterval); // this is the key 
    document.getElementById('gallery').src = 'Images/1.JPG'; 
} 

Удачи!