Eine Funktion für 24 Stunden verzögern

Question

Ich versuche, eine Funktion nicht vorübergehend (24 Stunden) nach einmaligem Klicken zu arbeiten.

Ich habe versucht, das Ganze in einer Funktion setTimeout() Umwickeln der ms bis zu einem Tag zählen Einstellung, die 86400000.

ist (siehe Ausgabe here)

$('.dates').click(function() { 
    var rand = Math.floor(Math.random() * 100 + 1); 
    var flows = ["flowOne", "flowTwo", "flowThree"]; 
    var colors = ["colOne", "colTwo", "colThree", "colFour", "colFive", "colSix"]; 
    var timing = (Math.random() * (1.3 - 0.3) + 1.6).toFixed(1); 
    // Animate Particle 
    $('<div class="particle part-' + rand + ' ' + colors[Math.floor(Math.random() * 6)] + '" style="font-size:' + Math.floor(Math.random() * (30 - 22) + 22) + 'px;"><i class="fa fa-heart-o"></i><i class="fa fa-heart"></i></div>').appendTo('.particle-box').css({ 
    animation: "" + flows[Math.floor(Math.random() * 3)] + " " + timing + "s linear" 
    }); 
    $('.part-' + rand).show(); 
    // Remove Particle 
    setTimeout(function() { 
    $('.part-' + rand).remove(); 
    }, timing * 1000 - 100); 
    $('#output').html(function(i, val) { 
    return parseInt(val, 10) + 1; 
    console.log(val); 
    }); 
    return false; 
}); 

Gibt es etwas, was ich bin fehlt ?

Wie verzöge ich die Funktion so, dass sie nur alle 24 Stunden aufgerufen werden kann?

Answer 1

Um zu verhindern, dass eine Funktion ausgeführt wird, ohne zu ändern, wie der Rest Ihrer Anwendung mit der Funktion interagiert, müssen Sie eine Art Flag oder boolesche Bedingung verwenden.

Zum Beispiel:

$('.dates').click(function() { 
    if (!isActive) { 
    return; 
    } 

    // rest of your code 
}); 

Nun ist die einfachste Art und Weise 24 Stunden ab der aktuellen Zeit zu berechnen, ist wahrscheinlich durch Date.now unter Verwendung der aktuellen Zeit in Millisekunden fügen Sie dann 24 Stunden in Millisekunden abgerufen werden, auf diesen Wert .

// Calculate 24 hours in milliseconds 
var second = 1000; 
var minute = 60 * second; 
var hour = 60 * minute; 
var day = 24 * hour; 

var now = Date.now(); 
var tomorrow = now + day; 

Bedenkt man, wie lange Sie warten wollen, werden Sie wahrscheinlich wollen, dies sparen in localStorage:

localStorage.setItem('next-active-time', tomorrow); 

Alles was Sie jetzt tun müssen, ist ändern, wie Sie die Funktion zu aktivieren. Anstatt eine einfache Flagge verwenden, überprüfen Sie für den nächsten Wert im lokalen Speicher und nur aktivieren, wenn es

• wurde noch nicht erstellt
• die aktuelle Zeit größer oder gleich diese Zeit

$('.dates').click(function() { 
    // default to 0 when it hasn't been set 
    var nextActiveTime = localStorage.getItem('next-active-time') || 0; 
    if (Date.now() < nextActiveTime) { 
    return; 
    } 

    // rest of your code 
    // make sure to update local storage at this point 
}); 

Answer 2

In der Theorie könnten Sie erreichen, was Sie mit lodash throttle (oder ähnliche Implementierung) tun möchten, aber es sieht für mich wie Sie im Browser programmieren, so Durchsetzung dieser 24-Stunden-Regel ist unmöglich (der Benutzer kann Aktualisieren Sie die Seite jederzeit. Mit dieser sagte:

• Wenn Sie nicht über die Durchsetzung es egal, eine Kopie lodash des throttle bekommen.
• Wenn Sie nur daran interessiert sind, es teilweise durchzusetzen (es wird nur im aktuellen Browser durchgesetzt), könnten Sie localStorage verwenden (ich empfehle this Bibliothek), oder wenn Sie nur die neuesten Browser unterstützen, empfehle ich mit indexedDB mit this Wrapper.
• Wenn Sie wirklich daran interessiert sind, es (über Browser und Geräte) zu erzwingen, müssen Sie den Benutzer authentifizieren und eine Sitzung im Backend verfolgen. Diese Route sprengt den Rahmen dieser Frage, also werde ich hier enden.

Ich hoffe, dass die Dinge ein wenig aufklärt.