Question

我有以下代码：

$("#test").on("keyup", (e) => {
  if(e.target.value.length === 3) {
    setTimeout(() => {
      console.log("fired")
    }, 2000)
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="test">

如果用户输入3个字符，则console.log("fired")将在2秒后自动触发（与上面的代码一起使用）

但是，如果用户在这段时间内键入另一个字符，则我需要能够清除旧的超时时间并再次等待2秒。

一旦超时，它就应该按预期运行。我该如何实现？

编辑：

let timeOut;

$("#test").on("keyup", (e) => {
  if(e.target.value.length === 3) {
    timeOut = setTimeout(() => {
      console.log("fired if length is 3")
    }, 2000)
  } else if (e.target.value.length === 4) {
    clearTimeout(timeOut)
    timeOut = setTimeout(() => {
      console.log("fired if length is 4")
    }, 2000)
  }
})

Answer 1

存储对超时的引用，然后可以在再次触发创建超时时使用引用和函数clearTimeout重置超时。

您还可以存储标志以跟踪邮件是否已被触发，并使用该标志中止进一步的操作。

let timeOut,
    hasFired = false;

$("#test").on("keyup", (e) => {
  if ( hasFired ) {
    return;
  }
  if(e.target.value.length >= 3) {
    clearTimeout( timeOut );
    let message = "length is " + e.target.value.length;
    timeOut = setTimeout(() => {
      console.log( message );
      hasFired = true;
    }, 2000)
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="test">

在用户输入上使用setTimeOut触发事件

1 个答案: