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/我认为任何用户都不会浏览 9 到 10,000 个项目来查找他们的课程'感兴趣。

至于滞后；你能做的事情是有限度的，这就是极限。我没有看到可以修复它的简单优化，这样做毫无意义，因为没有人会使用包含数千个项目的下拉列表。

你会？

于 2013-08-02T04:45:41.733 回答
0

您应该牢记用户。用数千个项目填充下拉列表不是一个好的用户界面设计。

更改您的代码并将整个字符串构造在内存中，并在完成后将其添加到页面中。

编辑：在我开始编辑您的代码示例后，我对所有括号和大括号进行了排序。我意识到您的代码已经包含我建议的内容。正如 HMR 在他的评论中建议的那样，您可以尝试直接创建 DOM 对象而不使用字符串中间。

于 2013-08-02T04:48:30.857 回答