组合框在 Chrome 浏览器中显示大数据时速度太慢答案

【问题标题】：Combo Box displaying too slow with large data in Chrome Browser组合框在 Chrome 浏览器中显示大数据时速度太慢
【发布时间】：2015-07-30 12:35:09
【问题描述】：

与建议使用JavaScript框架的其他答案不同，我想知道显示记录太慢的可能解决方案。

可能性（我的观点）：

1- 仅加载 100 条记录，滚动到最后一条记录时，会显示接下来的 100 条记录（总共 200 条），依此类推。（“但如何实现这一点”是个问题）。在这种情况下，可以使用 Ajax。

2- 如果元素有任何属性可以缓冲记录，或者我们可以使用 JavaScript 缓冲记录。

除此之外，我是新手。必须有一个解决方法，请建议我正确的方法。一些工作示例将是可观的。

document.writeln("<select>");
for(var i = 1; i < 10000; i++){
	document.writeln("<option value='" + i + "'>" + i + "</option>");
}
document.writeln("</select>");

<html>
<head>
<script src="script.js"></script>
</head>
<body>
</body>
</html>

【问题讨论】：

标签： javascript jquery ajax combobox buffering

【解决方案1】：

 <!DOCTYPE html>
        <html>
        <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>      

        </head>
        <body>
        <!-- you can adjust showing number of data from here -->
        <select id='slr' onfocus='this.size=5;' onblur='this.size=1;' 
                onchange='this.size=1; this.blur();' >
        <option>ram1</option>
        <option>ram2</option>
        <option>ram3</option>
        <option>ram4</option>
        <option>ram5</option>
        <option>ram6</option>
        <option>ram7</option>
        <option>ram8</option>
        <option>ram9</option>
        <option>ram1</option>
        <option>ram2</option>
        <option>ram3</option>
        <option>ram4</option>
        <option>ram5</option>
        <option>ram6</option>
        <option>ram7</option>
        <option>ram8</option>
        <option>ram9</option>
        <option>ram1</option>
        <option>ram2</option>
        <option>ram3</option>
        <option>ram4</option>
        <option>ram5</option>
        </select>

        </body>
        <script>
          $('#slr').scroll(function() {
           //Its 90 px far from reaching the bottom you can adjust its value its depend on scroller size and scrollers size is depend on how much data you are showing
            if(($(this)[0].scrollHeight-$(this).scrollTop())<=90)
            {
        //you can call you ajax function here and add value in innerhtml of select tag
        alert($(this)[0].scrollHeight);

            }

        });
        </script>
        </html>

【讨论】：

这工作正常，只是打开的列表不会像预期的组合框的默认行为那样覆盖。你能解决它吗？
正如您在问题中已经提到的那样，您希望在下拉列表中加载数据，当它到达底部时，我已经通过警报消息向您展示了演示。它令人困惑，因为每次都会发出警报消息，但是当您删除警报消息并每次向下滚动时获取数据时，获取的数据滚动大小将增加，并且当用户真正滚动时将调用下次获取的数据。因为数据没有增加，所以它的警报永远。每当有人在下拉列表之外单击时，它会像正常下拉列表一样自动隐藏。或者您也可以以编程方式单击某处。只是评论提醒
创建一个 javascript 变量，每次在您发出请求（进程）时为其赋值，并在请求成功完成时更改其值（comp），当它们不再需要获取数据时再增加 1 个值（no_more ).下次当你要请求检查变量值时，如果它的值是“comp”，那么 goaway 否则停止程序。
可能不相关，但我认为至少 Chromium Edge 实际上存在一个错误，有时甚至包含两个元素的组合框会使我的浏览器慢下来。