Javascript 组合框在Chrome浏览器中显示大数据时显示太慢
与其他建议使用JavaScript框架的答案不同，我想知道显示记录太慢的可能解决方案 可能性（我的观点）： 1-加载100条记录，滚动到最后一条记录时，显示下一条100条记录（总共200条），依此类推。（“但如何实现这一目标是个问题）。在这种情况下，可以使用Ajax 2-如果元素的任何属性可以缓冲记录，或者我们可以使用JavaScript缓冲记录 除此之外，我还是新手。必须有一个解决办法，请建议我正确的方法。一些工作实例将是可观的Javascript 组合框在Chrome浏览器中显示大数据时显示太慢,javascript,jquery,ajax,combobox,buffering,Javascript,Jquery,Ajax,Combobox,Buffering,与其他建议使用JavaScript框架的答案不同，我想知道显示记录太慢的可能解决方案 可能性（我的观点）： 1-加载100条记录，滚动到最后一条记录时，显示下一条100条记录（总共200条），依此类推。（“但如何实现这一目标是个问题）。在这种情况下，可以使用Ajax 2-如果元素的任何属性可以缓冲记录，或者我们可以使用JavaScript缓冲记录 除此之外，我还是新手。必须有一个解决办法，请建议我正确的方法。一些工作实例将是可观的 document.writeln（“”）； 对于（变量i=1；
document.writeln（“”）；
对于（变量i=1；i<10000；i++）{
书面文件（“+i+”）；
}
文件。书面形式（“”）
ram1
ram2
ram3
ram4
ram5
ram6
ram7
ram8
ram9
ram1
ram2
ram3
ram4
ram5
ram6
ram7
ram8
ram9
ram1
ram2
ram3
ram4
ram5
$（'#slr'）。滚动（函数（）{
//它的90像素远没有达到底部，你可以调整它的值，它取决于滚动条的大小，滚动条的大小取决于你显示的数据量
如果（$（此）[0].scrollHeight-$（此）.scrollTop（））这很好，只是打开的列表没有像预期的组合框默认行为那样覆盖。你能修复它吗？正如你在问题中已经提到的，当下拉列表到达底部时，你想在下拉列表中加载数据，我已经通过提醒消息向你展示了演示。这很令人困惑，因为每次提醒消息，但当你删除时每次向下滚动时，警报消息和获取数据获取的数据滚动大小将增加，下次用户真正滚动时，将调用获取的数据。因为数据不会增加，所以每次都会发出警报。每当有人在下拉列表外单击时，它会像正常下拉列表一样自动隐藏。或者您也可以单击“某处”程序重要的是。只需注释警报创建一个javascript变量，每次发出请求（流程）时给它赋值，请求成功完成时更改它的值（comp），当它们不再需要获取数据时再更改一个值（no_more）。下次发出请求时，检查变量值是否为“comp”然后goaway否则停止程序。可能没有关系，但我认为实际上有一个bug，至少在Chromium Edge上是这样，有时甚至连带有两个元素的组合框都会让我的浏览器慢到爬行的速度。
<!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>