web-dev-qa-db-ger.com

probleme mit setTimeout/clearTimeout

Ich versuche, eine Seite zu erstellen, um nach z. B. zur Startseite zu gelangen. 10 Sekunden Inaktivität (Benutzer klickt nirgendwo an). Ich benutze jQuery für den Rest, aber das Setzen/Löschen in meiner Testfunktion ist reines Javascript.

In meiner Frustration hatte ich so etwas wie diese Funktion, von der ich hoffte, dass ich sie bei jedem Klick auf die Seite aufrufen konnte. Der Timer startet gut, wird jedoch bei einem Klick nicht zurückgesetzt. Wenn die Funktion innerhalb der ersten 10 Sekunden fünfmal aufgerufen wird, erscheinen 5 Alarme ... no clearTimeout ...

function endAndStartTimer() {
    window.clearTimeout(timer);
    var timer;
    //var millisecBeforeRedirect = 10000; 
    timer = window.setTimeout(function(){alert('Hello!');},10000); 
}

Hat jemand ein paar Codezeilen, die den Trick tun werden? - Bei jedem Klick stoppen, zurücksetzen und den Timer starten . - Wenn der Timer z. 10sec etwas tun.

85
Tillebeck

Sie müssen timer outside die Funktion angeben. Andernfalls erhalten Sie bei jedem Funktionsaufruf eine neue Variable.

var timer;
function endAndStartTimer() {
  window.clearTimeout(timer);
  //var millisecBeforeRedirect = 10000; 
  timer = window.setTimeout(function(){alert('Hello!');},10000); 
}
192
Pointy

Das Problem ist, dass die Variable timer lokal ist und ihr Wert nach jedem Funktionsaufruf verloren geht.

Sie müssen es beibehalten, Sie können es außerhalb der Funktion platzieren, oder wenn Sie die Variable nicht als global verfügbar machen möchten, können Sie sie in einer Schließung speichern, z.

var endAndStartTimer = (function () {
  var timer; // variable persisted here
  return function () {
    window.clearTimeout(timer);
    //var millisecBeforeRedirect = 10000; 
    timer = window.setTimeout(function(){alert('Hello!');},10000); 
  };
})();
44
CMS

Das liegt daran, dass der Timer eine lokale Variable für Ihre Funktion ist.

Versuchen Sie es außerhalb der Funktion zu erstellen.

14
arclight

Eine Möglichkeit, dies in rea zu verwenden:

class Timeout extends Component {
  constructor(props){
    super(props)

    this.state = {
      timeout: null
    }

  }

  userTimeout(){
    const { timeout } = this.state;
    clearTimeout(timeout);
    this.setState({
      timeout: setTimeout(() => {this.callAPI()}, 250)
    })

  }
}

Hilfreich, wenn Sie eine API erst aufrufen möchten, nachdem der Benutzer beispielsweise die Eingabe beendet hat. Die userTimeout-Funktion kann über onKeyUp an einen Eingang gebunden werden. 

3
zero_cool

Ich bin mir nicht sicher, ob dies gegen eine Kodierungsregel für gute Praxis verstößt, aber ich komme normalerweise mit dieser heraus:

if(typeof __t == 'undefined')
        __t = 0;
clearTimeout(__t);
__t = setTimeout(callback, 1000);

Dies verhindert, dass der Timer aus der Funktion heraus deklariert werden muss.

BEARBEITEN: Dies deklariert auch nicht bei jedem Aufruf eine neue Variable, sondern recycelt immer dieselbe.

Hoffe das hilft.

2
clamiax

Das funktioniert gut. Es ist ein Manager, den ich für Hold-Events geschaffen habe. Hat Ereignisse zum Halten und für das Loslassen.

function onUserHold(element, func, hold, clearfunc) {
    //var holdTime = 0;
    var holdTimeout;

    element.addEventListener('mousedown', function(e) {
        holdTimeout = setTimeout(function() {
            func();
            clearTimeout(holdTimeout);
            holdTime = 0;
        }, hold);
        //alert('UU');
    });

    element.addEventListener('mouseup', clearTime);
    element.addEventListener('mouseout', clearTime);

    function clearTime() {
        clearTimeout(holdTimeout);
        holdTime = 0;
        if(clearfunc) {
            clearfunc();
        }
    }
}

Der Elementparameter ist derjenige, den Sie halten. Der func-Parameter wird ausgelöst, wenn er eine durch den Parameter hold angegebene Anzahl von Millisekunden hält. Der Parameter clearfunc ist optional. Wenn er angegeben wird, wird er ausgelöst, wenn der Benutzer das Element loslässt oder verlässt. Sie können auch einige Problemumgehungen durchführen, um die gewünschten Funktionen zu erhalten. Genießen! :)

0
Kino Bacaltos