带有ajax请求的mouseover/mouseout事件[重复]

Question

我最近遇到了这个问题，我希望我能从这里获得一些顶级想法。这是我的代码的样子：

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

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

正确的执行顺序是 mouseover - generate view - mouseout - hide view。

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

Answer 1

您尝试过使用 Promises 吗？ 这需要调整，但类似于：

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

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