2

このように、科目用とコース用の2つのドロップダウンを表示するページがあります

    <fieldset>
        <legend>Subject:</legend>
        <select id="subjectList" onchange="SetCourses()">
             <option value="">select subject</option>
             <option value="1">Html</option>
             <option value="2">Css</option>
             <option value="3">Javascript</option>
             <option value="4">Jquery</option>
             <option value="5">Php</option>
        </select>
    </fieldset>

    <fieldset>
        <legend>Courses:</legend>
        <select id="courseList">
             <option value="">select course</option>
        </select>
    </fieldset>

したがって、科目の変更に伴い、コースのドロップダウンが次のようにコースの膨大なリスト (約 9000 - 10000 レコード) で更新されます。

    function SetCourses() {
        var subject = $('#subjectList').val();
        var courseList = $('#courseList');
        var courseString = '<option value="">select course</option>';
        if (!!subject) {
            courseList.html(courseString);
        }
        else {
            $.ajax({
               url: "test.html",
               context: document.body
            }).done(function(data) {
               if(!!data) {
                  $.each(data, function(index, value) {
                     courseString += '<option value="'+value.id+'">'+value.text+'</option>'; 
                  });
                  courseList.html(courseString);   // this takes times 
               }
            });
        }
    }

問題は、レコードがコース ドロップダウンに書き込まれるときに 10 ～ 12 秒近くかかり、その間にページがハングすることです。その間にどこかをクリックすると、ブラウザが長時間応答しなくなります。時間の。

デバッグを行ったところ、ajax 呼び出しが成功するまでページは完璧であり、データを書き込む行に到達すると、その時点から UI がフリーズすることがわかりました。

では、UI をフリーズせずにこのような巨大なデータを DOM に書き込む適切な方法は何ですか?

4

2 に答える 2

3

長いドロップダウンが不適切なリストについては、オートコンプリートを試してみてください: http://jqueryui.com/autocomplete/に興味があります。

遅れについては。できることには限界があり、これが限界です。それを修正する簡単な最適化は見当たりません。何千ものアイテムを含むドロップダウンを使用する人はいないので、そうするのは無意味です。

しますか？

于 2013-08-02T04:45:41.733 に答える