【TypeScript】一定時間キー操作が無い場合、処理を実行する




1年以上前に更新された記事です。
情報が古い可能性がありますので、注意してください。
export abstract class MyTimer {
    private t: number;
    private id: number;

    /**
     * コンストラクタ
     * @param t タイムアウト時間
     */
    constructor(t: number) {
        this.t = t;
        this.id = null;
    }

    /**
     * タイマー設定
     */
    public setMyTimer = (): void => {
        if(this.id !== null) clearTimeout(this.id);
        this.id = setTimeout(this.fncTimeOut, this.t);
    }

    /**
     * タイムアウト後処理
     */
    protected abstract fncTimeOut();
}
import {MyTimer} from './MyTimer';

export class MyTimeOut extends MyTimer {
    protected fncTimeOut() {
        console.log('タイムアウトしました');
    }
}
import {MyTimeOut} from './MyTimeOut';

var mto = new MyTimeOut(1000);
document.getElementById('textBox').addEventListener('keyup', mto.setMyTimer, false);

入力処理がある度にタイマーをセットし直す。
また、アロー関数を使用してthisを保持している。

アロー関数ではなくて、呼び出し側でbindを使用したほうが良いのだろうけれど…面倒くさい

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です