檢測特定時間內是否鍵入了某些字符

Question

我正在嘗試確定用戶是否在特定時間內鍵入了一組特定字符。

我做了一些工作，我想，但我知道它不是很好，因爲它使用全局變量toMatch。我用setInterval聲明瞭它，但沒有var關鍵字。雖然範圍的想法令我感到困惑，但我正在努力學習，並且我想知道是否有人可以提供更好的方法來做到這一點？

//set the toMatch array equal to the character codes for the word 'test' 
//reset it to its original value every 2seconds 
var matchTime = setInterval(function(){ console.log('toMatch reset'); toMatch = [84,69, 83, 84];}, 2000); 


document.addEventListener("keydown", function(e){ 

    var key = e.which; 
    findMatches(key); 

}); 

function findMatches(key){ 

    //if the key is in the first position in the array, remove it 
    if (key == toMatch[0]){ 
     toMatch.shift(); 

    } 
     console.log(toMatch); 

    //if all shifted out, clear the interval 
    if (toMatch.length == 0) { 
    window.clearInterval(matchTime); 
    alert('typed \'test\' within two seconds'); 
    } 

} 

jsbin

謝謝

Answer 1

試試這個

function listenForWord(word) { 
    word = word.toUpperCase(); // event char codes are in upper case 
    var counter = 0, 
     time = 0; 
    // I used jQuery, you could also use addEventListener but don't 
    // forget to use attachEvent so it works in all browsers! 
    $(document).keydown(function (e) { 
     // Because the code is inside a function, the variable 
     // word is available at this level but is not global 
     var currentTime = new Date().getTime(); 
     if (currentTime - time > 1000) { 
      // If the user waits more than 1 second to type the next letter 
      // The counter is reset, I'm not sure if this is what you want! 
      counter = 0; 
     } 
     var character = word.charCodeAt(counter), 
      first = word.charCodeAt(0); 
     if (character == e.which) { 
      counter++; 
     } else if (character == first) { 
      counter = 1; 
     } else { 
      counter = 0; 
     } 
     if (counter == word.length) { 
      counter = 0; 
      alert("You typed " + word + " fast enough"); 
     } 
     time = currentTime; 
    }); 
} 

listenForWord("test"); 
// You could potentially call this function with other words 
// And it will work 

請注意，我的代碼沒有setInterval電話 - 因爲在現實中，你只需要檢查用戶是否有每當他按下某個鍵時，都會輸入正確的單詞，無需在間隔內進行任何重置。

這是不完全一樣的你，因爲它允許用戶最多4秒，以輸入一個字母4字（每個鍵鍵入的間隔不超過1秒）。

如果您想要測試他們在設置的第2個時間限制內鍵入了所有4個字符，您可以重新設置邏輯，以便在按下第一個鍵時存儲時間 - 然後將當前時間與該時間進行比較而不是最後一次按鍵的時間。

Answer 2

如果你的主要問題是如何避免全局變量，然後一個簡單的答案是尋找到了立即調用的函數表達式（IIFE）。本Alman在這裏有一個很好的文章：http://benalman.com/news/2010/11/immediately-invoked-function-expression/

它基本上封裝了所有的變量/函數到自己的範圍，並調用自身的時候了。您可以將其應用到您的代碼中，只需要很少的更改

 

//Begin IIFE 
(function(){ 
    //declare toMatch variable inside IIFE scope - prevents it from polluting the global scope 
    var toMatch; 
    //set the toMatch array equal to the character codes for the word 'test' 
    //reset it to its original value every 2seconds 
    var matchTime = setInterval(function(){ 
     console.log('toMatch reset'); 
     toMatch = [84,69, 83, 84]; 
    }, 2000); 

    document.addEventListener("keydown", function(e){ 
     var key = e.which; 
     findMatches(key); 
    }); 

    function findMatches(key){ 

     //if the key is in the first position in the array, remove it 
     if (key == toMatch[0]){ 
      toMatch.shift(); 
     } 
     console.log(toMatch); 

     //if all shifted out, clear the interval 
     if (toMatch.length == 0) { 
      window.clearInterval(matchTime); 
      alert('typed \'test\' within two seconds'); 
     } 

    }; 
})(); 


console.log(window.toMatch) // now toMatch isn't a global variable