如何实现首次消息立即提交，后续需等待5秒才能再次提交的JS功能？

基础HTML结构 #

先准备一个简单的输入框和发送按钮：

<div class="chat-area">
  <input type="text" id="msgInput" placeholder="输入消息">
  <button id="sendBtn">发送</button>
</div>

JavaScript实现方案 #

核心逻辑是用变量记录上次提交的时间戳，每次点击发送时判断时间间隔：

• 首次提交时直接放行
• 后续提交需检查距离上次提交是否超过5秒，未达标则拦截

// 获取页面元素
const msgInput = document.getElementById('msgInput');
const sendBtn = document.getElementById('sendBtn');

// 记录上次提交时间，初始值0表示从未提交过
let lastSendTime = 0;
// 限流等待时长（毫秒）
const waitDuration = 5000;

sendBtn.addEventListener('click', function() {
  const inputText = msgInput.value.trim();
  // 空内容直接提示，不执行后续逻辑
  if (!inputText) {
    alert('请输入消息内容');
    return;
  }

  const currentTime = Date.now();
  const timeGap = currentTime - lastSendTime;

  // 首次提交 或 距离上次提交已过5秒，允许发送
  if (lastSendTime === 0 || timeGap >= waitDuration) {
    // 这里替换成你的实际请求代码，比如发送ajax请求
    console.log('提交消息:', inputText);
    
    // 更新上次发送时间
    lastSendTime = currentTime;
    // 清空输入框
    msgInput.value = '';
  } else {
    // 计算剩余等待秒数
    const remaining = Math.ceil((waitDuration - timeGap) / 1000);
    alert(`请再等${remaining}秒后发送`);
  }
});

关键逻辑说明 #

• lastSendTime：存储上次提交的毫秒级时间戳，初始值0用于判断是否是首次提交
• Date.now()：获取当前时间的毫秒数，用来计算两次提交的时间差
• 提交前先校验输入内容，避免无效请求
• 符合条件时执行提交逻辑并更新时间戳，不符合则提示剩余等待时间

内容的提问来源于stack exchange，提问作者Nokai