Timer für Tastenklicks

Question

Wir bereiten einen "Spiel" -Button mit Klassenfunktion vor, auf den Sie so oft wie möglich klicken, um (zu diesem Zeitpunkt) eine zunehmende Zufallszahl zu generieren. Wir möchten jedoch, dass es nach einer festgelegten Zeit von 10 Sekunden nicht mehr funktioniert.

Der Klick-Code unten ist für die Nummerngenerierung, aber nicht sicher, wie man den Timer zum Stoppen der Schaltfläche erstellt und zu Testzwecken eine Warnung anzeigt.

$('.click-button').click(function() { 
    $('.score').html(function(i, val) { 
     return val - Math.floor(Math.random() * -11); 
    }); 
}); 

Answer 1

Ich gebe zu, dass dies ein bisschen ein Hack ist und könnte eine bessere Leistung haben, aber für dieses Beispiel wird es funktionieren.

Erstellen Sie ein Times-Array, in dem die Uhrzeit gespeichert wird, zu der ein Klickereignis aufgezeichnet wurde. Die Methode getTime() gibt die Anzahl der Millisekunden seit der Epoche von 1970 zurück. Um die Anzahl der Sekunden zu erhalten, multiplizieren wir das einfach mit 1000.

Mit jedem Klick überprüfen wir, ob seit dem ersten Klick 10 Sekunden vergangen sind.

Schauen Sie sich das Snippet

var clickTimes = [];       // Store click times here 
 

 
/* Get number of ms since the epoch with getTime and add to array. On every click check whether the time has elapsed */ 
 

 
$('.click-button').click(function() { 
 
    
 
    clickTimes.push(new Date().getTime()); 
 
    
 
    if (new Date().getTime() - clickTimes[0] < 10000) { 
 
     $('.score').html(function(i, val) { 
 
      return val - Math.floor(Math.random() * -11); 
 
     }); 
 
    } 
 
    else { 
 
     $(".score").html("Time's up! Click again to try again!"); 
 
     
 
     clickTimes.length = 0;    // Clear array 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="click-button">Generate Random Numbers</button> 
 

 
<p class="score"></p>

Answer 2

Wie wäre es wir eine Variable, die um eins erhöht jeder zweiten setInterval verwenden und erlauben nur den Klick zu funktionieren, wenn diese Variable unter 10:

In diesem Beispiel erhalten Sie nach 10 Sekunden eine andere Warnung.

var time = 0; 
 

 
function start() { 
 
    setInterval(function() { 
 
    var curr = $('#container').text(); 
 
    time++; 
 
    $('#container').text(time); 
 
    }, 1000); 
 
} 
 

 
$('#btn').on('click', function(e) { 
 
    if ($('#container').text() < 11) { 
 
    console.log('K cool, enough time left'); 
 
    } else { 
 
    alert('TOO Late'); 
 
    } 
 
}) 
 

 
start()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="container"> 
 
    0 
 
</div> 
 
<button id='btn'>Click me Before 10 seconds</button>