javascript - 更新悬停/异步时的 HTML 标题属性

Question

我要获取网页上许多 html“标题”属性的内容的一些相当昂贵的数据，因此我想仅在用户请求时加载此属性的数据(悬停时，出于明显的原因)。我可以在悬停时很好地设置标题属性，但它显示不正确。具体来说，我必须在异步调用完成后、文本出现之前将鼠标指针移动至少一个像素。我希望异步调用完成后立即显示文本(或者至少在通常的悬停文本延迟之后，如果异步调用完成得更快的话)

$('body').on('mouseenter', '.thumbnail', function(){
    var self = $(this);

    setTimeout(function(){
        var titleStr = "yay, a new title";

        self.attr('title', titleStr)
      $('#status').text("title set!")
    }, 1000)    

});

(我在这个新问题“向导”上找不到可运行的代码按钮，所以这里有一个jsfiddle:https://jsfiddle.net/76dk3snz/)

我还尝试运行其他事件，如 .trigger('mousemove') 或 mouseleave 和 mouseenter 等，但似乎没有任何事件触发所需的行为。

(也就是说，我希望用户无需再次移动鼠标即可显示文本)

Answer 1

在 Chrome 中，您可以在调用昂贵的操作之前设置元素的标题，然后加载文本将显示为工具提示，并在响应到来后替换为真实标题返回:

$('body').on('mouseenter', '.thumbnail', function() {
  var self = $(this);
  self.attr('title', 'Loading...')
  setTimeout(function() {
    var titleStr = "yay, a new title";
    self.prop('title', titleStr)
    $('#status').text("title set!")
  }, 1000)


});

.thumbnail {
  width: 100px;
  height: 100px;
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="thumbnail">

</div>

<div id="status">

</div>

不幸的是，在 Firefox 中似乎没有办法强制刷新 title - 该机制是浏览器内部的，并且仅受用户启动的 mose 事件影响。