経緯
キーワード検索するとき、検索ボタンを押さずに、入力された時点で自動的に結果が変わるようにしたい。
でも、changeイベントは一度フォーカスをはずさないといけないから、keyupでやりたい。
そうすると、入力キーが押される度、通信が走って、サーバーに負荷をかけそう。
ってときの対処法。
対処法
ここではjQuery前提で話を進めます。HTMLは次のようなもの。
<input id="keyword" /> <ul id="result-list"> <!-- ここに結果が反映される。 --> </ul>
基本的には入力が終わって、しばらくしたら、Ajaxを投げる、というやり方です。
$(function(){ var $keyword = $('#keyword'); var $resultList = $('#result-list'); var url = $keyword.data('href'); // Ajax通信を行う関数 function send(){ $.ajax({ type: 'GET', dataType: 'html', data: { keyword: $keyword.val(), url: url, success: function(data){ // 通信が成功したらリストを総入れ替え $resultList.html(data) } } }); }; var send_timeout_id = null $keyword.on('keyup', function(){ // keyupされた時点で既にsendの実行が予約されていたら一旦削除 if(send_timeout_id){ clearTimeout(send_timeout_id); } // 500ms後にsendを実行するように予約 send_timeout_id = setTimeout(send, 500); } });
CoffeeScriptの場合
$ -> $keyword = $('#keyword') $resultList = $('#result-list') send = -> url = $productKeyword.data('href') $.ajax( type: 'GET' dataType: 'html' data: keyword: $productKeyword.val() url: url success: (data) -> $productList.html(data) ) send_timeout_id = null $productKeyword.on 'keyup', -> clearTimeout(send_timeout_id) if send_timeout_id send_timeout_id = setTimeout(send, 500)
まとめ
Ajaxを使うとUX的にはいいものになる場合も、ヘタすると、サーバーへの無駄な負荷をかけることにもなりかねません。
いつ、どのくらいの頻度で通信が行われるのかしっかり意識しておきましょう。
大変助かりました。有益な記事をありがとうございました!
そのままだとうまくいかなかったのですが、send_timeout → send_timeout_id に修正したところうまくいきました!
誤字かもしれないので念のためご報告です。