Page 48 - JavaScript修炼之道

36 第三部分 UI技巧

任务 16 实现“无限翻页”

无限翻页是Gmail给我们带来的概念，它在几个应用场景下的应用宣告了分页导航的末日。
许多人（尽管不是所有人）都发现，在浏览大量条目时无限翻页更有效，于是就都倾向于使用视
觉模式匹配，而不是移动鼠标去一次又一次地单击分页链接。

分页导航几乎只是基于技术原因提出的。

 老版浏览器渲染慢，这使我们不得不保持页面“足够轻便”。
 客户端和服务器之间任何一处都可能有带宽限制，这也要求我们减少页面大小。
 服务器端的处理时间随着数据增多而增加。一次性渲染整个数据集不仅是浪费，而且对
服务器来说也不可行（至少是不现实和笨拙的），尤其是服务器想要处理足够多的并发请
求时。

分页导航只不过是一种方法，一种不用JavaScript的方法。启用了JavaScript之后，如果用无
限翻页比较合适的话，你就可以不再用任何分页链接，而用无限翻页来代替它们。至于是否采用
无限翻页，这就得交给你的用户可用性专家以及你的合理直觉来判断了。

在右页的代码中可以看到，无限翻页并没有什么特别奇特的地方。唯一比较棘手的就是跨浏
览器正确计算长度比较麻烦，这从lowEnough()方法的代码中可以很明显地看到。

我们实质上是在判断文档底部离当前显示区域底部是否已不太远。这只不过是足够频繁地检
查垂直滚动条的当前状态，每秒10次足够了！然后用Ajax载入更多内容。

考虑到可用性（和容错），你或许也需要提供分页导航：把Next链接设置为默认隐藏，如果
Ajax获取数据失败就显示这些链接，这样用户还可以回到用分页链接来操作的状态。

给手头没有PHP服务器的读者一个提示：作为demo来说，可以不用访问服务器，客户端直
接载入更多内容就能看到效果，这里的PHP代码只不过是在返回静态内容前等待半秒以模拟载
入时间。