« Google Language API | メイン | JavaScriptで配列に値が入っているかどうかを判定する »

onkeydown等のイベントで重ための関数を実行するときのテクニック

昨日のGoogle Language API絡みで。

Google AJAX Language APIを試してみた - techlog

一気に入力していくと、最後のほうで入力したものが翻訳されない。
そんなときは一文字打つか、↑とか↓とか押せば再度イベントが発生して翻訳される。
非同期通信の動作は全然調べていないので・・・。
上とか下とか押しただけで、イベントが発生してしまうので、無駄なリクエストが飛びすぎる。
でも制御する方法がよくわからない・・・。Googleに怒られるかな。

こういう場合は、onkeydownのイベントに直接実行したい関数を紐付けるのではなく、以下のtimerTranslateの方を紐付けておくと良い感じになります。

var timer_id; //setTimeoutでの戻り値を受け取る変数。
function timerTranslate(){
    try{clearTimeout( timer_id )}catch(e){}
    timer_id = setTimeout("translate()",1000); //第2引数で時間(msec)を指定
}
function translate(){
    //実行したい関数
}

つまり、テキストエリアでkyedownイベントが発生したら、それ以前に発生したタイマー処理をクリア(なかったこと)にし、一定時間後に翻訳処理が走るようにします。これで、キーボード入力で連続したイベントが発生しても、translate関数が実際に実行される回数を低減でき、サーバの負荷を下げることができます。

コメント (3)

はじめまして。
clearTimeout( timer_id )の使い方を知りませんでした。
このタイマー処理は、いろいろと応用ができそうで、とても勉強になりました。
JavaScriptは初心者なので、また何か気付いたところがあれば、教えていただけると嬉しいです。
どうもありがとうございます!

はじめまして!
いえいえ;僕も素人に毛が生えたようなものなので・・・。
にちにち翻訳おもしろいですね!

ありがとうございます。
比較的簡単に使えそうだったの、いろいろ遊んでみようと思っています。