jQuery 在最后一次按键后延迟2秒运行代码

在本文中，我们将介绍如何使用 jQuery 实现在最后一次按键后延迟2秒运行代码的效果。这在一些实时搜索、自动保存等需求中非常常见。

实现原理

要实现这个效果，我们可以利用 jQuery 的keyup事件和setTimeout方法。keyup事件会在按键松开时触发，我们可以通过添加事件监听器来捕捉到keyup事件。然后，在keyup事件的回调函数中，我们使用setTimeout方法来设定一个2秒的定时器，当定时器结束后，执行我们想要运行的代码。

代码示例

下面是一个使用 jQuery 实现在最后一次按键后延迟2秒运行的例子：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Run Code After 2 Seconds</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
     $(document).ready(function() { var typingTimer; var doneTypingInterval = 2000; // 2秒 // 输入框的keyup事件监听$ ('#search-input').keyup(function() {
        clearTimeout(typingTimer);
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
      });

      // 当定时器结束后执行的函数
      function doneTyping() {
        // 这里写需要延迟2秒后执行的代码
        console.log('2秒后运行的代码');
      }
    });
  </script>
</head>
<body>
  <input id="search-input" type="text" placeholder="在这里输入搜索内容">
</body>
</html>

在上面的例子中，我们首先引入了 jQuery 库。在页面加载完成后，我们使用$(document).ready方法来确保文档加载完成后再执行我们的代码。接着，我们定义了一个typingTimer变量来保存定时器的引用，以及一个doneTypingInterval变量来设定延迟的时间间隔（这里为2秒）。

然后，我们给输入框添加了一个keyup事件监听器。当按键松开时，我们清除之前的定时器并设定一个新的定时器，在2秒后触发doneTyping函数。在doneTyping函数中，我们可以写需要延迟2秒后运行的代码。这里我们只是简单地在控制台输出了一段文字。

你可以将上面的代码复制到一个HTML文件中运行，然后在输入框中输入内容并等待2秒钟后查看控制台，应该能够看到输出的文字。