clearInterval() не работает, и я не могу понять, почему

Question

Я пытаюсь добавить кнопку play/pause к таймеру с функцией, которая решает, что делать в зависимости от значения isRunning. Когда во второй раз нажата моя кнопка вместо паузы, таймер добавляет еще один setTimeout, и я не могу понять, почему.

var isRunning = false; 

function start() { 
    if(isRunning == false) { 
    isRunning = true; 
    setInterval(time, 1000); 
    document.getElementById("play").className = "fa fa-pause"; 
    } 
    else if(isRunning == true) { 
    isRunning = false; 
    document.getElementById("play").className = "fa fa-play"; 
    console.log(isRunning); 
    clearInterval(time); 
    } 
} 

document.getElementById("play").onclick = start; 

Answer 1

var isRunning = false; 
var timeoutId; // Where the timeout id will be stored. 

function start() { 
    if(isRunning == false) { 
    isRunning = true; 
    timeoutId = setInterval(time, 1000); 
    document.getElementById("play").className = "fa fa-pause"; 
    } 
    else if(isRunning == true) { 
    isRunning = false; 
    document.getElementById("play").className = "fa fa-play"; 
    console.log(isRunning); 
    clearInterval(timeoutId); // clearInterval using timeout id saved before. 
    } 
} 

document.getElementById("play").onclick = start; 

Для получения дополнительной информации посетите https://developer.mozilla.org/es/docs/Web/API/WindowTimers/setTimeout