Javascriptでタイムリセット機能付きで遅延実行させる方法

JavascriptのsetTimeout()を使って何らかの処理を遅らせて実行させたい場合のやり方です。

実現したいこと

今回はJavascript、html、CSSのオンラインエディタでリアルタイムプレビューをさせるようなシステムを作成しており、「キーボードが打ち続けられている間」はリアルタイムプレビューを行わず、「キーボードが押されなくなってから２秒後」にリアルタイムプレビューするようなイメージでした。

厳密にいえばリアルタイムプレビューではないですね（苦笑）。

指定時間毎に実行されるような自動保存機能に似ていますが、今回の制作物はキーが打ち続けられている間はタイマーのカウントが0に戻らなければならないという点がポイントです。

コード

var timer = false;

$('textarea').on( 'keyup' ,function(){
	if (timer != false)  clearTimeout(timer);
	timer = setTimeout(function() {
		//ここに遅延実行する処理の内容
		timer = false;
	}, 2000);
});

キーボードのkeyupイベントが発生するたびに前タイマーをクリアーして毎回新たなタイマーを開始しています。

そのままkeyupイベントから2秒が経過すると「//ここに遅延実行する処理の内容」部分の処理が実行されるというわけです。

今思えばなんてことのないアルゴリズムですが、当初は妙に考えすぎてしまい組み立てるまでに大きく遠回りしてしまいました。