1

このようなWebページがあります（簡略化された例）

<table id="events_results_table">
    <thead>
        <tr>
            <th class="header">Title One</th>
            <th class="header">Title Two</th>
        </tr>
    </thead>
    <thead>
        <tr>
            <td><input id="search" type="text" /></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>value 1</td>
            <td>...</td>
        </tr>
        <tr>
            <td>value 2</td>
            <td>...</td>
        </tr>
    </tbody>
</table>

そのページには、次のようなJavaScriptもあります

$("#search").keyup(function(event){
    var theText = $('#search').val();
    $('#events_results_table tbody tr td').closest('tr').hide();
    $('#events_results_table tbody tr td:contains("'+theText+'")').closest('tr').show();
});

これは基本的なテキスト フィルターを実装します。ユーザーが検索フィールドに文字を入力すると、一致しない行が非表示になり、一致する行が表示されます。簡単なテーブル検索。

問題は、この単純な実装では、テーブルに数百行ある場合にパフォーマンスのボトルネックが発生することです。行が常にキーボードに応答するとは限らないか、テーブルが追いつくまでキーボードの入力がブロックされます。

この種の機能をパフォーマンスの高い方法で実装するための「既知の科学」はありますか? 私は自分でいくつかの異なるアプローチを考えることができますが、始める前に既に解決された問題を再発明していないことを確認したかった.

4

1 に答える 1

1

はい、入力時に ~0.5 秒のタイムアウトを設定し、新しいキーが入ったときにタイマーをリセットします。タイムアウトが終了すると、結果が更新されます。実際に単語を入力している間、誰も結果を見ることはありません。

これにより実際にパフォーマンスが向上するわけではありませんが、使いやすさが大幅に向上します。

于 2012-07-20T20:41:38.640 に答える