clearInterval не работает при нажатии

Question

Clearinterval не очищает интервал. Программа зацикливается на ожидание щелчка. Как сделать ясный интервал, как только он обнаружит щелчок?

var timerID; 
    function waitForClick() { 
     timerID = setInterval(listen(), 1000); 
    } 

    function listen() { 
     document.getElementById("graphic").onclick = function stopListen() { 
      alert("clicky"); 
      clearInterval(timerID); 
     } 
    }; 

    waitForClick(); 
    return; 

Answer 1

Фактически, это очистка интервала. Я считаю, что проблема - это ваша логика и то, что вы ожидаете. Давайте немного сломаем ваш код:

var timerID; 
function waitForClick() { 
    timerID = setInterval(listen(), 1000); 
} 

Здесь вы создали интервал. Тем не менее, ваш интервал фактически возвращаемое значение listen, так что вы в основном делают это:

timerID = setInterval(undefined, 1000); 

Когда setInterval вызывается, он вызывает listen (из-за ()), который связывает свой onclick обработчик к graphic элементу , Это происходит только один раз, иначе вы увидите несколько сообщений alert. Когда пользователь затем нажимает на элемент graphic, вы предупреждаете «щелкнуть», а затем очищаете свой интервал.

Проблема, похоже, в том, что вы снова щелкаете по элементу и видите предупреждение и считаете, что интервал все еще запущен. Это не так: у вас просто есть обработчик событий, который все еще связан!

Если вы сделаете это:

document.getElementById("graphic").onclick = function stopListen() { 
    alert('clicky'); 
    clearInterval(timerID); 

    // Clear out event handler 
    document.getElementById('graphic').onclick = null; 
} 

Вы увидите, что сигналы остановки (потому что мы в явной форме установить OnClick к нулю).

Fiddle: http://jsfiddle.net/k2muguog/

Я считаю, что вы пытаетесь сделать что-то вроде этого:

function waitForClick() { 
    if (!timerId) { 
     timerId = setInterval(toInterval, 1000); 
     document.getElementById('graphic').onclick = function() { 
      alert('clicky'); 
      clearInterval(timerId); 
      timerId = null; 
     } 
    } 
} 

function toInterval() { 
    // Logic here - BUT NOT THE CLICK HANDLER 
    document.getElementById('output').innerHTML = Date.now(); 
} 

http://jsfiddle.net/k2muguog/1/

Щелкнув должен предупредить, а затем остановить интервал.