javascript - 带有 ajax 请求的 mouseover/mouseout 事件

Question

这个问题已经有答案了:

jquery mouseover and mouseout bug (1 个回答)

已关闭 5 年前。

我最近刚刚遇到这个问题，我希望我能从这里得到一些重要的想法。我的代码如下所示:

$(document).on('mouseover', '#element', function(){
    $.ajax({
          // generate hover view
     })
});

$(document).on('mouseout', '#element', function(){
     // remove hover view
});

正确的执行顺序是鼠标悬停 - 生成 View - 鼠标移开 - 隐藏 View 。

但是，由于 View 部分依赖于 ajax，如果用户悬停速度超快，则在 ajax 调用完成之前，mouseout 事件有可能被触发。在这种情况下，在 ajax 调用完成后， View 将停留在 DOM 中而不会消失，因为 mouseout 事件已经被触发。

Answer 1

您尝试过使用 Promise 吗？这需要进行调整，例如:

$.when( $.ajax( "someajaxfile.txt" ) ).then(function( data, textStatus, jqXHR ) {
  $(document).on('mouseout', '#element', function(){
     // remove hover view
});
});

您可能还需要取消绑定(bind) mouseout。