javascript - 在 setTimeout 中使用时添加和删除类会产生竞争条件

Question

一个对象上有 2 个对象，需要让它们都获取类:

<script>
$(document).ready(function(){
    var delayMillis = 200; 
    $('#overtop').hover(function(){ $('#honemove').addClass('hover');}, function () { setTimeout(function() { $('#honemove').removeClass('hover'); }, delayMillis); });
    $('#overtop').hover(function(){ setTimeout(function() { $('#htwomove').addClass('hover'); }, delayMillis); }, function () { $('#htwomove').removeClass('hover'); });
});
</script>

<div id="overtop" class="overlay"></div>
<h1 id="honemove" class="h1a"><span>TITLE OF THE TITLE</span></h1>
<h2 id="htwomove"><span>INFO BELLOW TITLE</span></h2>

它目前可以工作，但如果你进行大量鼠标悬停，它会出现故障，CSS 部分很好，我想它不喜欢在一个操作上有两个单独的脚本。

Answer 1

使用clearTimeout防止发生任何类型的竞争条件:

$(document).ready(function() {
  var $overtop = $('#overtop')
  var $honemove = $('#honemove')
  var $htwomove = $('#htwomove')
  
  var delay = 200
  var token
  
  $overtop.hover(function() {
    clearTimeout(token)
    $honemove.addClass('hover')
    token = setTimeout(function() {
      $htwomove.addClass('hover')
    }, delay)
  }, function() {
    clearTimeout(token)
    $htwomove.removeClass('hover')
    token = setTimeout(function() {
      $honemove.removeClass('hover')
    }, delay)
  })
});

.hover {
  color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overtop" class="overlay">Overlay</div>
<h1 id="honemove" class="h1a"><span>TITLE OF THE TITLE</span></h1>
<h2 id="htwomove"><span>INFO BELLOW TITLE</span></h2>