动态存储对 setTimeout() 的引用

Question

我正在创建一个可重复使用的函数来监控按钮被点击的频率，并等到用户停止点击它以继续，它似乎工作得很好，直到我尝试创建 2 个按钮（这将是它的样子生产中）

我在用户单击时使用对象来存储数据。如果计时器未重置并用完，它将 post 数据。

如果您尝试只向柠檬按钮发送几次垃圾邮件，您就会看到它是如何工作的。如果您向钻石按钮发送垃圾邮件也是如此。

var arr = {};
var SC={}; 

function SpamControl(u, i) {
 this.ui = u+i;
  this.Sp = SC[ui];


if (!SC[ui]){

  SC[ui] = arr;
  SC[ui].timer= "";
  SC[ui].count = 0;
 }
   clearTimeout(SC[ui].timer);
   SC[ui].count = SC[ui].count + 1; 
   SC[ui].timer = setTimeout(function(){ 
    $('#count').prepend(u+" gave "+ SC[ui].count +" "+i+"'s in a controlled fashion!<br>");
         delete SC[ui];
    }, 1000);  
}

当您在两个按钮之间发送垃圾邮件时，问题就来了。我曾希望它能分别处理连接到按钮的两个用户，但似乎不能，我也不确定为什么。

我意识到这有点不清楚，但我只能说尝试一下以理解我的意思

这是一个fiddle：https://jsfiddle.net/gbe7dv1r/1/

Answer 1

不要使用全局变量，使用局部变量：

  let ui = u + i;
  let Sp = SC[ui];

此外，Sp 中的所有条目都将引用相同的 arr 对象，在初始化条目时，您可能希望为每个条目创建一个新对象：

 SC[ui] = { };

最后说几句妙语：像u, i, ui, SC, Sp, arr 这样的隐晦缩写，在维护这段代码的时候真的会让你很头疼。

 const controls = { /*[name]: { timer, count } */ }; 

 function spamControl(user, item) {
  const name = user + item;
  const control = controls[name] || (controls[name] = { timer: 0, count: 0 });

  control.count += 1;

  clearTimeout(control.timer);
  control.timer = setTimeout(function(){ 
      $('#count').prepend(
        `${user} gave ${control.count} ${item}"s in a controlled fashion!<br>`
      );
     delete controls[name];
  }, 1000);  
}

动态存储对 setTimeout() 的引用

Storing reference to setTimeout() dynamically

javascript

settimeout