先讲一下功能需求,很简单:
我们需要在鼠标放上用户头像的时候,打开一个扩展层,显示一些用户的扩展信息
如图:
好像这个功能和延迟读取没有什么关系,细想一下,当页面上用户的头像比较多,而且比较集中的时候,你鼠标很有可能会不停的划过它们,那要是一放上去就执行程序,势必会引起很多困扰,因为你也许根本不想去操作它,要是它的加载又影响到你其它的操作,是不是很烦人。所以这样的延迟读取是非常有必要的,哪怕只是延迟半秒种,都会有很好的效果。
那现在分解一下这个过程:
- 将鼠标指向一个用户的头像
- 触发onmouseover
- 触发setTimeout
- 延迟时间之后,执行加载程序,打开扩展层
- 鼠标移出扩展层