Javascript 仅在上一个动画完成后执行一行

我正在尝试使用jquery在悬停时设置li元素的动画。我希望li元素首先更改其维度（为此使用CSS转换），然后更改其文本。但是，在悬停函数中写入它会同时执行这两个操作，因此在元素展开之前，还会出现更大的文本

我尝试过使用callback（）来处理它，但它就是不起作用，文本永远不会改变。我也尝试过为它使用settimeout（）函数，它似乎工作正常，除非我们快速悬停并从元素中移除光标，在这种情况下，它仍然会更改文本

JS:

HTML

请尝试此代码

<script type="text/javascript">
    $(".dl").hover(function(){
    $(this).data('defaultText', $(this).text());
    $(this).css({"width": "320px", "height": "70px", "background-color": "aliceblue"});
    let that = this;
    setTimeout(function() {
        $(that).text("New Testing Text As a replacement").fadeIn(1000);
    },800);
    }, function(){
    $(this).css({"width": "160px", "height": "30px", "background-color": "rgb(237, 199, 183)"});
    $(this).text($(this).data('defaultText'));
    });
</script>

$（“.dl”）.hover（函数（）{
$（this.data（'defaultText'，$（this.text（））；
$（this.css（{“width”：“320px”，“height”：“70px”，“background color”：“aliceblue”}）；
让那=这；
setTimeout（函数（）{
$（即）.text（“作为替代品的新测试文本”）.fadeIn（1000）；
},800);
}，函数（）{
css（{“宽度”：“160px”，“高度”：“30px”，“背景色”：“rgb（237199183）”）；
$（this.text（$（this.data（'defaultText'））；
});

类似@shadowfeind的东西是的，我也尝试过，但是如果你快速悬停然后移除光标，那么新文本仍然会保留。哦，类似的东西。我想你可以使用

.is（“：hover”）

。。试试@shadowfeind哦，是的，这很好用，我不知道我们可以用这样的东西。非常感谢。您可以将此添加为答案，我可以将其标记为答案。我已经尝试过了，但问题是如果您快速悬停，然后移除光标，那么新文本仍会保留。

<ul class="devices-list">
  <li class="dl">Device one</li>
  <li class="dl">Device two</li>
  <li class="dl">Device three</li>
</ul>

.dl {
  width: 160px;
  height: 30px;
  text-align: center;
  background-color: rgb(237, 199, 183);
  border-radius: 4px;
  margin-top: 10px;
  margin-left: 80px;
  padding-top: 4px;
  transition: width 0.6s, height 0.6s, background-color 0.6s;
  transition-timing-function: ease;
}

<script type="text/javascript">
    $(".dl").hover(function(){
    $(this).data('defaultText', $(this).text());
    $(this).css({"width": "320px", "height": "70px", "background-color": "aliceblue"});
    let that = this;
    setTimeout(function() {
        $(that).text("New Testing Text As a replacement").fadeIn(1000);
    },800);
    }, function(){
    $(this).css({"width": "160px", "height": "30px", "background-color": "rgb(237, 199, 183)"});
    $(this).text($(this).data('defaultText'));
    });
</script>