John Doe John Doe - 6 months ago 12
Javascript Question

Deferring Incrementation of A Counter Every 24 Hours

I made an animation similar to the periscope hearts feature.
My Implementation

Right now it the counter keeps incrementing every time you press on the button. My objective is to stop the counter from counting every 24 hours but keep the part where a user can click on the button to activate the heart animation.

$('#heartActivate').click(function() {

// 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;

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

var nextActiveTime = localStorage.getItem('next-active-time') || 0;
if (Date.now() < nextActiveTime) {

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() * (4.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() * (37 - 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" });
$('<div class="particle part-' + rand + ' ' + colors[Math.floor(Math.random() * 6)] + '" style="font-size:' + Math.floor(Math.random() * (37 - 22) + 22) + 'px;"><i class="fa fa-star-o"></i><i class="fa fa-star"></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;
});
return false;
}


JSFiddle of all my code

Objective: Keep the heart animation when button clicked but only increment the counter on button click every 24 hours

Answer

this should work on jsfiddle, however the setLocalStorage is blocked here

your main issue is that you are always setting the localStorage to tomorrow, which means today will never be the day to update the counter.

you needed to check if the local storage exists, and use it, otherwise create it.

(however a user could remove the storage from there browser and keep pressing the button)

your logic of comparing the date was flawed (reversed) today (date.now()) is always less than tomorrow since you are generating it each time)

I separated the code out to make the main logic within the click function more clear and added some comments to explain it

function showAnimation() {
  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() * (4.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"
  });
  $('<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-star-o"></i><i class="fa fa-star"></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);
  return false;
}

function incrementCounter() {
  $('#output').html(function(i, val) {
    console.log(i, val);
    return parseInt(val, 10) + 1;
  });
}

function getTomorrow(today) {
  // Calculate 24 hours in milliseconds
  var second = 1000;
  var minute = 60 * second;
  var hour = 60 * minute;
  var day = 24 * hour;

  return today + day;
}
$('#heartActivate').click(function() {

  var today = Date.now();
  var tomorrow = getTomorrow(today);

  showAnimation(); //show hearts

  //calculate if we need to increase counter or return false
  //check if they already have a next-active-time stored on the browser
  var nextActiveTime = localStorage.getItem('next-active-time') || 0; 
  if (!nextActiveTime) {
    //they havent clicked before increment and set tommorows time in local storage
    localStorage.setItem('next-active-time', tomorrow);
    incrementCounter();
    return true
  }

  if (today >= nextActiveTime) { 
 // if today is greater than or equal to nextActiveTime increment by 1
    incrementCounter();
    localStorage.setItem('next-active-time', tomorrow);
    return true
  }
  //else do nothing we are not past tommorow yet

  return false
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="heartActivate" type="button">Activate Heart</button>
<div class="particle-box"></div>
<div id="output">1</div>