読者です 読者をやめる 読者になる 読者になる

しばらく入力しないとイベントが発生するようにする

テキストボックスで文字を入力したらイベントを発生させたい。
でもキーと押すたびにイベントを発生するのはコストがかかるので嫌だ(例えばAjaxリクエストをなげているとかで)。
そういう場合は、文字を入力してから一定時間文字の入力がなければイベントを発生させる案があります。
例えばTwitterのユーザ登録画面。いったんTwitterからログアウトして以下のURLにアクセスしてみて下さい。
https://twitter.com/signup

上記の画面がでると思います。
この画面の「ユーザ名」テキストボックスにユーザ名を入力してみます。
入力して少したつとユーザ名の重複バリデートが実行されます。


で、それをJavaScriptで書くとちょっと面倒かと思ったら意外とシンプルに出来ました。

var timer = null;
$('#title').bind('input', function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
            // なにかの処理
        }, 1000); // 入力されてから1秒後にイベントを実行
});