連続したキーイベントによる不要なAjaxリクエストを間引きたい

Question

初めて質問させていただきます。

前提・実現したいこと

• Ruby on Rails 5でWebアプリケーションを開発しています。フロントエンドはCoffeescript + jQuery + HTML5です。

• １枚の画面上にテーブルと、その１レコードに紐づく詳細情報が表示されるような画面構成です。

• 選択中のテーブル１レコードをカレント行とし、マウスクリックやキーイベントをトリガーにカレント行が移り、Ajaxで詳細情報を取得する仕組みです。

発生している問題

• 数行離れたレコードにカレント行を移すため、上下方向キーを連打すると全てのレコードに対して「律儀に」Ajaxリクエストが走ります。

• 通過するレコードによるAjaxリクエストの処理は走らせず、目的のレコードによるリクエストのみ処理させたいです。

• 「試したこと」に後述しますが、一定時間リクエストを待機する方法は試して、近いことは実現できました。他に方法がないかをご教示いただければ幸いです。

該当のソースコード

View層

<table>
	<thead>
		<tr>
			<th>code</th>
			<th>fruit</th>
		</tr>
	</thead>
	<tbody>
		<tr class='table-row'>
			<td>1</td>
			<td>apple</td>
		</tr>
		<tr class='table-row'>
			<td>2</td>
			<td>orange</td>
		</tr>
		<tr class='table-row'>
			<td>3</td>
			<td>grape</td>
		</tr>
		...
	</tbody>
</table>

<div id='results'>
	//ここに詳細情報を表示する
</div>

イベントハンドラ

$(window).on 'keydown', (event) ->
	c = if event.which then event.which else event.keyCode
	if $(document.activeElement).hasClass('table-row')
        # 押されたキーが上下方向キーのいずれか
		if c == 38 || c == 40
		  request_ajax()
		  return
		return

Ajax処理を投げる関数

request_ajax = ->
  'use strict'

  # クエリパラメータとしてカレント行のcodeをつけて投げる
  url_path = '...'

  $.ajax({
    url: url_path,
    type: 'GET',
    cache: false,
    dataType: 'html'
  }).done (html) ->
    $("#results").append html
    # 処理

試したこと

• トリガーとなるイベントをkeyupに変更する
  →キーを押しっぱなしにしたときに１行１行処理される状況は回避できますが、連打に対応できません。

• 一定時間リクエストを投げるのを待機して、待機中に次のキーイベントが発火すると待機中のリクエストをキャンセルする
  ソースコードは次の通りです。イベントハンドラを次のように書き換えました。

key_interval = 500

$(window).on 'keydown', (event) ->
  c = if event.which then event.which else event.keyCode
  if $(document.activeElement).hasClass('table-row')
    # 押されたキーが上下方向キーのいずれか
    if c == 38 || c == 40
      # 前回のキーイベントによる待機リクエストをキャンセルする  
      clearTimeout(last_timer_id)
      # Ajaxリクエストを予約
      timer = setTimeout(request_ajax, key_interval)
      # 次回のリクエストのためにタイマーIDを保持しておく
      last_timer_id = timer
      return
    return

→結局リクエストを投げるのを一瞬遅らせることになります。不要なリクエストを除去するために目的のリクエストの実行を遅らせるのはあまり上手なやり方ではないように思われます。

わざわざ実行を遅延させなくても済むような、よりよい方法はないでしょうか、という趣旨の質問です。足りない情報などあれば可能な限り補足します。よろしくお願いします。

Answer 1

「キーボード操作でフォーカスを変え、フォーカスがあたったらajaxでデータをフェッチする」ということが機能として正しいのであれば、その方法で間違いない気がします。ユーザがキーボードを連打しても、一度打っても、押しっぱなしにしても同じ結果にするにはそういった実装が必要になるでしょう。

その上で、APIへのリクエスト負荷を減らしたいのであれば、キーボードでの操作を機能からはずしてマウスやタップでのクリック時に同様のことを実装したり、あるいはそもそもAPI側で詳細情報も含めたHTMLをレンダリングするなどの方法が考えられます。

もしくは、「律儀に」すべてAjaxを実行することもありえない選択肢ではないように思います。Google検索のインクリメンタルサーチなどはそういった実装になっているはずですので。

サーバーの負荷とクライアントの実装工数とアプリケーションの利便性のバランスをとったより富豪的な選択を検討ください。