Question

我的问题是，当我将鼠标悬停在某个东西上时，它会在鼠标离开文本时执行第一个功能，然后执行第二个功能。这两个功能完全执行。我想要的是，如果鼠标在特定时间之前离开，请执行某些操作。例如，将文本更改为“ Fr”

ItemListComponent

$( "#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)
  }
}

Answer 1

使用clearTimeout()使您处在正确的轨道上。我在每个clearTimeout()函数之前添加了setTimeout()，并在顶部声明了TO。

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>

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

1 个答案: