JavaScript/WindowOrWorkerGlobalScope/clearTimeout

Die auf dem globalen Objekt verfügbare Methode clearTimeout löscht einen mit setTimeout erstellten Timer, analog zu clearInterval.

Syntax

clearTimeout(timeout-ID)

• timeout-ID: Rückgabewert von setTimeout()

Anwendungsbeispiel

Beispiel ansehen …

  var elem = document.getElementById('los');
  elem.addEventListener('click', startCountdown);	
  
  var elem = document.getElementById('stop');
  elem.addEventListener('click', stopCountdown);	

  function startCountdown () {
    countdown(10, 'counter');
    EnableCancelButton (true);
  }

  function stopCountdown() {
    var element = document.getElementById('counter');
    clearTimeout(element.timerId);
    EnableCancelButton(false);
  }

  function EnableCancelButton(enable) {
    var cancelButton = document.getElementById ("stop");
	cancelButton.disabled = !enable;
  }
        
  function leadingzero(number) {
    return (number < 10) ? '0' + number : number;
  }

  function countdown(seconds, target) {
    var element = document.getElementById(target);
    element.seconds = seconds;
    calculateAndShow(target);
  }

  function calculateAndShow(target) {
    var element = document.getElementById(target);
    if (element.seconds >= 0) {
        element.timerId = window.setTimeout(calculateAndShow,1000,target);
        var h = Math.floor(element.seconds / 3600);
        var m = Math.floor((element.seconds % 3600) / 60);
        var s = element.seconds % 60;
        element.innerHTML=
          leadingzero(h) + ':' +
          leadingzero(m) + ':' +
          leadingzero(s);
        element.seconds--;
    } else {
        completed(target);
        return false;
    }
  }

  function completed(target) {
    var element = document.getElementById(target);

    element.innerHTML = "<strong>Liftoff!<\/strong>";
  }

Es wird mit setTimeout() ein Countdown gestartet, der mit einem Klick auf den Stop-Button mittels clearTimeout() unterbrochen wird.

Weblinks

• W3C: cleartimeout
• MDN: Window.clearTimeout