使用setTimeout停止函数的循环迭代

Question

My problem is when I hover over something really fast, it executes the first function and then the second function when the mouse leave the text. The two functions are executed completely. I would like something like, if the mouse leave before a specific time, do something. For instance, change the text to "Fr"

 $( "#nav6" ).hover( function() { navsix(6); }, function() { <!-- clearTimeout(TO) --> nav6out(6); } ); function navsix(i) { if (window.matchMedia("(min-width: 600px)").matches) { var elem = document.getElementById("nav6"); var str = "Français"; var len = str.length + 1 - i; var TO = setTimeout(function () { elem.innerHTML = str.substring(0, len); if (--i) navsix(i); }, 50) } } function nav6out(i) { if (window.matchMedia("(min-width: 600px)").matches) { var elem = document.getElementById("nav6"); var str = "Français"; len = i + 1 var TO = setTimeout(function () { elem.innerHTML = str.substring(0, len); if (--i) nav6out(i); }, 50) } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="topnav-right"><a id="nav6" href="#Francais">Fr</a></div> 

Answer 1

You're on the right track with clearTimeout() . I added clearTimeout() right before each of your setTimeout() functions and declared TO at the top.

 var TO = ""; var hoverTimeout = ""; $("#nav6").hover( function() { hoverTimeout = setTimeout(function() { navsix(6); }, 200) }, function() { clearTimeout(hoverTimeout); nav6out(6); } ); function navsix(i) { if (window.matchMedia("(min-width: 600px)").matches) { var elem = document.getElementById("nav6"); var str = "Français"; var len = str.length + 1 - i; clearTimeout(TO); TO = setTimeout(function() { elem.innerHTML = str.substring(0, len); if (--i) navsix(i); }, 50) } } function nav6out(i) { if (window.matchMedia("(min-width: 600px)").matches) { var elem = document.getElementById("nav6"); var str = "Français"; if (elem.innerHTML.length > 2) { len = i + 1; clearTimeout(TO); TO = setTimeout(function() { elem.innerHTML = str.substring(0, len); if (--i) nav6out(i); }, 50) } } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="topnav-right"><a id="nav6" href="#Francais">Fr</a></div>