如何跟踪 Javascript 中的多个对象

Question

我正在构建一个包含多个计时器的页面。计时器在用户单击按钮时创建。因此，假设用户单击“K Timer 1”按钮。 JS 创建了一个新计时器，我想将其称为“KT1”或计时器 ['KT1'].

这是我正在尝试的方法，你们 JS 窥视者现在可能正在嘲笑我的解决方案。没关系。 PHP.

我更自在了

HTML

            <button type="button"
                onClick="newUTimer('KT1');">
                Timer 1
            </button>

            <button type="button"
                onClick="newUTimer('KT2');">
                Timer 2
            </button>

JS - 旧有错误

var timers = {};

newUTimer=function(id){
    // If timer does not exist, create it
    if (!globalThis.timers.[id]){
        globalThis.timers.[id] = new CUTimer(id);
        globalThis.timers.[id].starter();

    // If there is already a timer with that ID, reset it
    }else{
        globalThis.timers.[id].reset();
    }
}

我需要跟踪计时器的原因是当用户第二次单击按钮时我可以重置计时器而不是创建另一个冲突计时器。

JS - 更新和工作但不确定这是我应该这样做的正确方法。

var timers = {};

newUTimer=function(id){
    // If timer does not exist, create it
    if (!globalThis.timers[id]){
        globalThis.timers[id] = new CUTimer(id);
        globalThis.timers[id].starter();

    // If there is already a timer with that ID, reset it
    }else{
        // Call object resetIt method
        globalThis.timers[id].resetIt();
    }
}

Answer 1

去掉数组括号前的点： globalThis.timers.[id].starter() 应该是 globalThis.timers[id].starter()

Answer 2

您应该接受，因为它指出了您的实际错误。至于“更正确的方法”，去掉 inline javascript

var timers = {};

/*Get the buttons with the data attributes*/
let timerButtons = document.querySelectorAll("button[data-timerid]");
/*Itterate them adding an event handler*/
timerButtons.forEach(function(item){
  item.addEventListener("click", function(){
    /*Get the id from the data atttribute*/
    let timerId = this.dataset.timerid;
    /*Better to go the positive case first*/
    if(timers[timerId]){
      timers[timerId].resetIt();
    }else{
      timers[timerId] = new CUTimer(timerId);
    }
  });
})


function CUTimer(id){
  this.id = id;
  this.starter = function(){console.log("Starting : " + this.id)};
  this.resetIt = function(){console.log("Resetting : " + this.id)};
  //Call your starter method in the construtor
  this.starter();
};

<!-- Use Data Attributes to store the timer Id -->
<button type="button" data-timerid='KT1'>Timer 1</button>
<button type="button" data-timerid='KT2'>Timer 2</button>

如何跟踪 Javascript 中的多个对象

How do I keep track of multiple objects in Javascript

javascript

oop