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

Question

When mouse pointer enters link, onmouseenter calls function that works, but when mouse pointer leaves link, and it leaves very fast, onmouseleave does not fully execute the function, otherwise if going out slowly, it executes like it should

I have tried with onmouseover and onmouseout, functions execute fully, but there is constant flickering

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>

I expect that the code should return the div to initial state after hovering the link, disregarding movement speed of mouse pointer

Actual results are dependent to speed of mouse pointer leaving the link

Answer 1

Another solution is that if you add all the code in setTimeout() then this problem will not occur ;

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>