Question

我试图在点击一次后使功能暂时（24小时）不起作用。

我尝试将整个事情包装在setTimeout（）函数中，将ms计数设置为86400000天。

（参见输出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;
});

我有什么遗失的吗？

如何推迟该功能，以便每24小时只能调用一次？

Answer 1

为了防止函数执行，而不改变应用程序的其余部分与所述函数的交互方式，您需要使用某种标志或布尔条件。

例如：

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

  // rest of your code
});

现在，从当前时间24小时计算的最简单方法可能是使用Date.now以毫秒为单位检索当前时间，然后将24小时（以毫秒为单位）添加到该值。

// 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中：

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

现在您所要做的就是更改激活功能的方式。不是使用简单的标志，而是检查本地存储中的下一个值，只有在

时才激活

尚未创建
当前时间大于或等于该时间

$('.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

从理论上讲，你可以用lodash的throttle（或类似的实现）完成你想做的事情，但它看起来就像你在浏览器中编程一样，所以24小时执行规则是不可能的（用户可以随时刷新页面）。随着说：

如果您不关心执行它，请获取lodash的副本 throttle。
如果您只是关心部分执行它（它只会在当前浏览器中强制执行），您可以使用localStorage（我推荐this库），或者如果您只是支持最新的浏览器，我建议使用带有this包装器的indexedDB。
如果您关心真正执行它（跨浏览器和设备），您需要对用户进行身份验证并在后端跟踪会话。这条路线超出了这个问题的范围，所以我将在这里结束。

我希望稍微澄清一下。

推迟24小时的功能

2 个答案: