debounce 処理を利用してリアルタイム検索機能を改善してみた

はじめに 実務でインクリメンタルサーチ機能（＝リアルタイム検索）のパフォーマンスを改善するために 「debounce 処理」（後述します）を実装する必要がありましたので、工夫した点などについて書いていこうと思います。 興味ある方はぜひ最後までご覧ください。 debounce とは？ まず最初に「debounce」について軽く説明しておきます。 debounce とは 「対象のイベントが発生してから指定した時間が経過するまでは、同じイベントの発生を抑制する仕組み」 です。 もっとシンプルに言うと、対象のイベントにより連続で実行された関数たちの中で 1 番最後の関数だけ実行させる..といったイメージでしょうか？ （下記だと 3 と 6 だけしか実行されない） 言葉だけではイメージをつかめない方は、以下のサンプルコードを実際に動かしてみてください。 これまでのリアルタイム検索処理と課題 さてここ

[tohokuaiki]

おぉおぉ、これやぁ。インクリメンタルサーチを実装したい時にいたいやつ。debuouceっていうのね。／このSandboxのサンプル、flushする時に確定もさせないと300ms以内に他の検索ボックスを入力するとダメになる。