如何获得 Stackoverflow / Stackexchange - 像标签悬停工具提示？
将鼠标悬停在 Stackoverflow 上的标签上时，会出现一个工具提示，如下所示。这可能是通过 jquery.append 实现的，因为它在 HTML 文档的最后插入 HTML 代码。 在每个悬停事件上，经过一段时间的延迟后，会发出一个 AJAX 请求， - 可能通过 jquery.load(...)
发送到 webapps.stackexchange.com 的 url 查询例如 _=1318962590136，这是一个动态 Id 。
- 1）这在客户端和服务器端如何工作，有什么好处？
toolip 的有效负载是 HTML，如下所示：
<div><div class="tm-heading">...</div></div><span>.......</span>
离开标签后，动态加载的 HTML 将被删除。 css 样式已经存在于 stackoverflow 站点加载的 css-sheet 中。
- 2) 最初声明的事件似乎没有附加到构成标签的样式
链接元素。似乎只声明了 mousedown 事件（通过 Chrome 检查）。
JavaScript-DeObfuscator 给出了一些线索：事件监听器也是动态添加和删除的...
function (a, b, c) {
a.removeEventListener && a.removeEventListener(b, c, !1);
}
When hovering over a tag on Stackoverflow a tooltip appears as shown below. This is probably realized via jquery.append, as it inserts HTML code at the very end of the HTML document.
Upon each hover-event, after some time delay, an AJAX request is made, - probably via jquery.load(...)
The url query sent to webapps.stackexchange.com is for instance _=1318962590136, which is a dynamic Id.
- 1) How does this work on the client- and server-end, and what are the benefits?
The payload for the toolip is HTML and looks like this:
<div><div class="tm-heading">...</div></div><span>.......</span>
Upon leaving the tag, the dynamically loaded HTML is removed.
The css styles are already present in the loaded css-sheet of the stackoverflow site.
- 2) No initially declared event seems to be attached to the styled
<a>link element, which makes up the tag. Only mousedown events seem to be declared (checked via Chrome).
JavaScript-DeObfuscator is giving some clues: The event listeners are dynamically added and removed as well...
function (a, b, c) {
a.removeEventListener && a.removeEventListener(b, c, !1);
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
通过仅在用户触发悬停事件时更新数据，这意味着您不必每隔 x 秒不断查询数据库。这种方法完全浪费资源，特别是当您需要极其最新的信息时，每秒都可能会调用服务器。
但更好的方法（甚至比您在问题中讨论的方法更好）是一种称为 Comet 的方法。 Comet简单来说就是客户端向服务器发出请求，然后等待服务器响应（即服务器上的数据更新时）。这意味着只有当有更新的数据要推送到客户端时才会调用服务器。例如，（我相信）Facebook 就是这样运作的。
By updating the data only when the user triggers the hover event, it means that you don't have to constantly query the database every x amount of seconds. This method is a total waste of resources, especially when you want extremely up-to-date information, where it may be tempting to call the server every second.
But a better way of doing this (even better than the method you talk about in your question) is a method called Comet. Comet in simple terms means that the client makes a request to the server, and then waits for the server to respond (i.e. when the data on the server is updated). This means that the server is only called when there is updated data to be pushed to the client. This is how (I believe) Facebook works for instance.