背景:昨天一个同事有种需求,有一个展示数据区域的div,带滚动条,当滚动条滚动时,需要向后台发请求,计算数据,再拿到前台展示。
分析:由于数据量级别较大,所以当滚动条滚动时,如果时时向后台发请求,对服务器和浏览器都造成巨大的压力。想到的解决方案是,当滚动条停止时,再去发请求计算数据。那么问题来了,如何判断滚动条是否停止了呢?
解决:搜索了一下,js本身是无法判断滚动条是在滚动状态还是停止状态,只有通过其它方式了。后来想到的思路是当滚动条滚动的时候,发起一个定期执行的方法,并记录一次当前滚动条到顶部的距离,这个方法中判断此时滚动条到顶部的距离是否和上次记录的相等,如果相等,那么说明停止滚动了,不相等,还在滚动。
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> New Document </title>
<script type="text/javascript">
<!--
// 让浏览器出现滚动条
for(var i = 0; i < 100; i++) {
document.write("<br/>");
}
var topValue = 0,// 上次滚动条到顶部的距离
interval = null;// 定时器
document.onscroll = function() {
if(interval == null)// 未发起时,启动定时器,1秒1执行
interval = setInterval("test()", 1000);
topValue = document.documentElement.scrollTop;
}
function test() {
// 判断此刻到顶部的距离是否和1秒前的距离相等
if(document.documentElement.scrollTop == topValue) {
alert("scroll bar is stopping!");
clearInterval(interval);
interval = null;
}
}
//-->
</script>
</head>
<body>
</body>
</html>
可以设置定时执行的时间,时间越短,响应的越及时,浏览器压力越大;时间越长,响应的越慢,浏览器压力越小。
你还有更好的方式吗?求教
本文来自:高爽|Coder,原文地址:http://blog.csdn.net/ghsau/article/details/8693824