web-dev-qa-db-ja.com

setTimeout / clearTimeoutの問題

たとえば、開始ページに移動するページを作成しようとしました。 10秒間の非アクティブ（ユーザーがどこでもクリックしない）。残りにはjQueryを使用しますが、テスト関数のset/clearは純粋なjavascriptです。

フラストレーションの中で、私はこの機能のようなものになり、ページ上の任意のクリックで呼び出せることを望みました。タイマーは正常に起動しますが、クリックしてもリセットされません。関数が最初の10秒以内に5回呼び出された場合、5つのアラートが表示されます... no clearTimeout ...

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

誰かがトリックを行うコードの行をいくつか持っていますか？ -任意のクリックで、タイマーを停止、リセット、開始します。 -タイマーがヒットしたとき。 10秒は何かをします。

javascriptjquerytimersettimeout
91
Tillebeck

timeroutside関数を宣言する必要があります。それ以外の場合は、関数の呼び出しごとに新しい変数を取得します。

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

問題は、timer変数がローカルであり、その値が各関数呼び出しの後に失われることです。

永続化する必要がある、関数の外に置く、または変数をグローバルとして公開したくない場合は、 closure に格納することができます、例：

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

これは、タイマーが関数のローカル変数であるためです。

関数の外部で作成してみてください。

15
arclight

反応でこれを使用する方法：

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)
    })

  }
}

たとえば、ユーザーが入力を停止した後にのみAPIを呼び出す場合に役立ちます。 userTimeout関数は、onKeyUpを介して入力にバインドできます。

5
zero_cool

これが優れたコーディングルールに違反しているかどうかはわかりませんが、通常は次のようになります。

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

これにより、関数からタイマーを宣言する必要がなくなります。

編集：これは、各呼び出しで新しい変数を宣言しませんが、常に同じ変数をリサイクルします。

お役に立てれば。

2
clamiax

これはうまく機能します。保留イベントを処理するために作成したマネージャーです。保留のためのイベントと、手放すためのイベントがあります。

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();
        }
    }
}

Elementパラメーターは、保持するパラメーターです。 funcパラメーターは、パラメーターholdで指定されたミリ秒数の間保持されると起動します。 clearfuncパラメーターはオプションであり、指定された場合、ユーザーが要素を離したり離したりした場合に起動されます。いくつかの回避策を実行して、必要な機能を取得することもできます。楽しい！ :)

0
Kino Bacaltos