使用setTimeOut和clearTimeout显示消息

Question

我正在开发信用卡检查器项目。验证代码有效（所以我不包含它的代码），但我想更进一步： 用户输入一个数字并得到回复。如果该卡无效，他们会得到红色的“此卡无效”，如果有效，则答案为绿色。该消息在给定时间 (setTimeout) 后消失。问题是它只能工作一次。一次有效，一次无效。

我知道这与 timeoutId 和clearTimeout 有关，但我一直在追寻自己的尾巴，试图使其正确。可能是因为我还没有完全理解。

HTML：

<div class="credit-card">
      <p class="credit-card__text">Want to check you if your credit card is valid?</p>

      <input type="number" id="userInput" class="js-input" placeholder="type in your number and press ENTER" onkeydown="handleEnter(event)">

<div>
        <p id="js-return-valid"></p>
        <p id="js-return-invalid"></p>
      </div>
    </div>

JS：

    const displayValid = document.getElementById('js-return-valid');
    const displayInvalid = document.getElementById('js-return-invalid');
    let input  = '';

    
    function handleEnter(event) {
      
      if (event.key === 'Enter') {
        input = document.getElementById("userInput").value;
        input = String(input).split('').map((input
        ) => { return Number(input) });
        
        validateCred(input);  

        if (!validateCred(input)) { 
         
            setTimeout(function() {
                displayInvalid.style.display = "none";
            }, 2000);
            
            displayInvalid.innerHTML = `This number is not valid.`;
         
        } else {
           
            setTimeout(function() {
                displayValid.style.display = "none";
            }, 2000);

            displayValid.innerHTML = `This number is valid.`;
         }

      document.getElementById("userInput").value = null;

        } 
    }

Answer 1

• 在开始新的超时之前，请务必清除任何现有的超时。这可以确保即使用户多次快速按下 Enter 键，该消息也始终会在整个持续时间内显示。

• 重置 displayValid 和 displayInvalid 的显示属性，以便它们都可以再次显示消息。

  const displayValid = document.getElementById('js-return-valid');
  const displayInvalid = document.getElementById('js-return-invalid');
  let input  = '';
  let timeoutId;
  
   function handleEnter(event) {
    if (event.key === 'Enter') {
   clearTimeout(timeoutId);
  
   displayValid.style.display = "block";
   displayInvalid.style.display = "block";
  
   input = document.getElementById("userInput").value;
   input = String(input).split('').map(Number); 
  
   if (!validateCred(input)) {
       // Set message for invalid input
       displayInvalid.innerHTML = 'This number is not valid.';
       displayValid.innerHTML = ''; 
  
       timeoutId = setTimeout(() => {
           displayInvalid.style.display = "none";
       }, 2000);
   } else {
       // Set message for valid input
       displayValid.innerHTML = 'This number is valid.';
       displayInvalid.innerHTML = ''; // Clear the invalid message
  
       // Hide valid message after 2 seconds
       timeoutId = setTimeout(() => {
           displayValid.style.display = "none";
       }, 2000);
   }
  
   document.getElementById("userInput").value = null;
   }
  }
  

Answer 2

您需要保存并清除超时。您将显示设置为无，但从未将其重置为弯曲或其他。

var messageTimeout

displayInvalid.classList.remove("hide");
displayInvalid.innerHTML = `This number is not valid.`;

clearTimeout(messageTimeout);
messageTimeout = setTimeout(function() {
displayInvalid.classList.add("hide");
}, 2000);

.displayInvalid.hide {
display: none;
}