当指针离开并转到下一个 link 太快时，在 onmouseleave 中调用的函数的转换不会完全执行

Question

当鼠标指针进入link时，onmouseenter调用函数起作用，但是当鼠标指针离开link时，并且离开的速度非常快，onmouseleave没有完全执行该函数，否则如果退出慢慢地，它像它应该的那样执行

我试过onmouseover和onmouseout，功能完全执行，但一直闪烁

function menuSlideOn(element) {
              document.getElementById(element).style.transition = 'all 0.1s';
              document.getElementById(element).style.height = '24px';
              document.getElementById(element).style.margin = '0px 6px 0px 0px';
              setTimeout(function delay() {
                  document.getElementById(element).style.width = '120px';
      document.getElementById(element).style.transform = 'skew(-30deg)';
              },
              120);
          }

          function menuSlideOf(element) {
              document.getElementById(element).style.transition = 'all 0.1s';
              document.getElementById(element).style.width = '6px'
              setTimeout(function delay() {
                  document.getElementById(element).style.height = '10px';
                  document.getElementById(element).style.margin = '5px 6px 0px 0px';
      document.getElementById(element).style.transform = 'skew(0deg)';
              },
              120);
          }

ul {
 list-style-type: none;
 margin: 10px;
    }
    li {
 margin: 10px;
 padding: 10px;
    }
    ul a {
 color: #333;
 text-decoration: none;
 text-indent: 20px;
 font-weight: bold;
 position: fixed;
    }
    .bullet {
 width: 6px;
 height: 10px;
 background: gray;
 float: left;
 margin-top: 5px;
 position: absolute;
    }

<ul>
                    <li onmouseenter="menuSlideOn('d1')" onmouseleave="menuSlideOf('d1')">
      <div id="d1" class="bullet">&nbsp;</div>
      <a href="">HTML</a>
                    </li>
                    <li onmouseenter="menuSlideOn('d2')" onmouseleave="menuSlideOf('d2')">
                        <div id="d2" class="bullet">&nbsp;</div>
      <a href="">CSS</a>
                    </li>
                    <li onmouseenter="menuSlideOn('d3')" onmouseleave="menuSlideOf('d3')">
                        <div id="d3" class="bullet">&nbsp;</div>
      <a href="">JavaScript</a>
                    </li>
                    <li onmouseenter="menuSlideOn('d4')" onmouseleave="menuSlideOf('d4')">
                        <div id="d4" class="bullet">&nbsp;</div>
      <a href="">Java</a>
                    </li>
                </ul>

我希望代码在悬停 link 后 return div 到初始状态，忽略鼠标指针的移动速度

实际结果取决于鼠标指针离开 link

的速度

Answer 1

另一种解决方法是，如果把setTimeout()中的所有代码都加进去，就不会出现这个问题了；

function menuSlideOn(element) {
    setTimeout(function delay() {
    document.getElementById(element).style.transition = 'all 0.1s';
    document.getElementById(element).style.height = '24px';
    document.getElementById(element).style.margin = '0px 6px 0px 0px';
    
        document.getElementById(element).style.width = '120px';
        document.getElementById(element).style.transform = 'skew(-30deg)';
    },
    150);
}

function menuSlideOf(element) {
    setTimeout(function delay() {
    document.getElementById(element).style.transition = 'all 0.1s';
    document.getElementById(element).style.width = '6px'
    
        document.getElementById(element).style.height = '10px';
        document.getElementById(element).style.margin = '5px 6px 0px 0px';
        document.getElementById(element).style.transform = 'skew(0deg)';
    },
    150);
}

ul {
 list-style-type: none;
 margin: 10px;
    }
    li {
 margin: 10px;
 padding: 10px;
    }
    ul a {
 color: #333;
 text-decoration: none;
 text-indent: 20px;
 font-weight: bold;
 position: fixed;
    }
    .bullet {
 width: 6px;
 height: 10px;
 background: gray;
 float: left;
 margin-top: 5px;
 position: absolute;
    }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="mouse_out.js"></script>
    <link rel="stylesheet" href="mouse_out.css">
</head>

<body>
    <ul>
        <li onmouseenter="menuSlideOn('d1')" onmouseleave="menuSlideOf('d1')">
            <div id="d1" class="bullet">&nbsp;</div>
            <a href="">HTML</a>
        </li>
        <li onmouseenter="menuSlideOn('d2')" onmouseleave="menuSlideOf('d2')">
            <div id="d2" class="bullet">&nbsp;</div>
            <a href="">CSS</a>
        </li>
        <li onmouseenter="menuSlideOn('d3')" onmouseleave="menuSlideOf('d3')">
            <div id="d3" class="bullet">&nbsp;</div>
            <a href="">JavaScript</a>
        </li>
        <li onmouseenter="menuSlideOn('d4')" onmouseleave="menuSlideOf('d4')">
            <div id="d4" class="bullet">&nbsp;</div>
            <a href="">Java</a>
        </li>
    </ul>
</body>

</html>

当指针离开并转到下一个 link 太快时，在 onmouseleave 中调用的函数的转换不会完全执行

Transition of the functions called in onmouseleave do not execute fully when pointer leaving and going to next link too fast

html

javascript

css

onmouseover

onmouseout