Question

请注意，答案可能非常简单，因为我在JavaScript方面不是很先进。

我需要调用相同的函数或来自不同事件的类，以便在进程正在进行时执行简单的动画。

特别是：当用户点击某个按钮时，它会调用AJAX请求，因此我希望通过旋转图像（如微调器）来设置此过程的动画。当第一个进程正在进行时，用户可以单击另一个按钮来为另一个元素执行类似的AJAX请求，因此第二个微调器图像假设在第一个仍在进行时开始旋转。

我遇到的问题是，一旦我第二次拨打同一班级，第一次停止。这是因为我正在更改Updating.TheID的ID，但我认为更新是一个应该在每次调用时启动另一个实例的类。我刚刚了解到JavaScript并不是一种多线程语言，所以我想我可以使用数组或其他东西来单独保存ID，但我正在寻找一个更优雅的＃34;使用最少的代码进行处理。请指教。

function UpdateData(id) { // This function called when a user clicks a button
    Updating.TheID = id;
    Updating.Begin();
}

var Updating = {
    Degrees: 0,
    TheID: 0,
    ImageID: '',
    Begin: function() {
        this.ImageID = "ImgID" + this.TheID;
        this.RotateImage();
    //  CallAJAXProcess(TheID); // This function should run in background
    },
    RotateImage: function() {
        this.Degrees += 15;
        document.getElementById(this.ImageID).style.transform = "rotate(" + this.Degrees + "deg)";
        if (this.Degrees < 360) {
            setTimeout(this.RotateImage.bind(this), 41);
        } else {
            this.Degrees = 0;
        }
    }
}

Answer 1

即使你创建了一个new UpdateData()，它将创建一个唯一的对象，每个对象都将引用同一个Updating对象;您没有创建该数据的多个实例。

在这种情况下，您似乎不希望在两个更新事件之间共享任何状态。请尝试使用此模式：

function updateData(id) { // This function called when a user clicks a button
  var updateOperation = new UpdateOperation(id);
  updateOperation.begin();
}

function UpdateOperation(id) { 
  this.id = id;
  this.degrees = 0;
  this.imageId = '';
}

UpdateOperation.prototype = {
  begin: function() {
    this.imageID = "ImgID" + this.id;
    this.rotateImage();
    // CallAJAXProcess(TheID); // This function should run in background
  },
  rotateImage: function() {
    this.degrees += 15;
    document.getElementById(this.imageID).style.transform = "rotate(" + this.degrees + "deg)";
    if (this.degrees < 360) {
      setTimeout(this.rotateImage.bind(this), 41);
    } else {
      this.degrees = 0;
    }
  }
};

从2个不同的事件调用相同的功能进行同步处理

1 个答案: