проблемы с очисткой setTimeout() в коде javascript

Question

Я пытаюсь сделать кнопку, которая при нажатии останавливает выполнение автоматического слайд-шоу. Функция clearTimeout() не работает по какой-то странной причине. может кто-нибудь, пожалуйста, скажите мне, как заставить его работать?

var button = document.getElementById("button"); 
button.addEventListener("click",stop); 
function stop(){ 
    **clearTimeout(t);** 
} 

window.addEventListener("load",finalResult); 

**var t = setTimeout(function(){finalResult()},0);** 

function finalResult(){ 
    getFirstImage(); 

    function getFirstImage(){ 
    img1.style.display = "block"; 
    setTimeout(getSecondImage,3000); 
} 

function getSecondImage(){ 
    img1.style.display = "none"; 
    img2.style.display = "block"; 
    setTimeout(getThirdImage,3000); 
    } 

function getThirdImage(){ 
    img3.style.display = "block"; 
    img2.style.display = "none"; 
    setTimeout(getFourthImage,3000); 
} 

function getFourthImage(){ 
    img4.style.display = "block"; 
    img3.style.display = "none"; 
    setTimeout(loopAgain,3000); 
} 

function loopAgain(){ 
    img4.style.display = "none"; 
    setTimeout(getFirstImage,0); 
} 


} 

Answer 1

Необходимо очистить все таймауты, присутствующие на странице.

Что-то вроде этого:

var button = document.getElementById("button"); 
button.addEventListener("click", stop); 

function stop() { 
    clearTimeout(t); 
    clearTimeout(a); 
    clearTimeout(b); 
    clearTimeout(c); 
    clearTimeout(d); 
    clearTimeout(e); 
} 

window.addEventListener("load", finalResult); 

var t = setTimeout(function() { 
    finalResult() 
}, 100); 

var a, b, c, d, e; 

function finalResult() { 
    getFirstImage(); 

    function getFirstImage() { 
    img1.style.display = "block"; 
    a = setTimeout(getSecondImage, 3000); 
    } 

    function getSecondImage() { 
    img1.style.display = "none"; 
    img2.style.display = "block"; 
    b = setTimeout(getThirdImage, 3000); 
    } 

    function getThirdImage() { 
    img3.style.display = "block"; 
    img2.style.display = "none"; 
    c = setTimeout(getFourthImage, 3000); 
    } 

    function getFourthImage() { 
    img4.style.display = "block"; 
    img3.style.display = "none"; 
    d = setTimeout(loopAgain, 3000); 
    } 

    function loopAgain() { 
    img4.style.display = "none"; 
    e = setTimeout(getFirstImage, 0); 
    } 
}