Jack Watts Jack Watts - 4 months ago 10
Ajax Question

Calling same function from 2 different events for simultaneous process

Please keep in mind that the answer could be very simple, since I'm not too advanced in JavaScript.

I need to call the same function or a class from different events to perform a simple animation while the process is in progress.

In particular: when a user clicks on a button, it engages AJAX request, so I want to animate this process by rotating an image (like a spinner). While the first process is in progress a user can click on another button to engage the similar AJAX request for another element, so the second spinner image suppose to start rotating while the first is still in progress.

The problem I'm having is that as soon as I call the same class second time the first one stops. That's because I'm changing the ID of the Updating.TheID but I thought Updating is a class that should initiate another instance every time it's called. I just learned that JavaScript is not a multithreaded language, so I suppose I could use an array or something to keep ID's separately, but I was looking for a more "elegant" approach with the minimal code. Please advice.

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

Even if you create a new UpdateData(), which will create a unique object, each one will be referring to that same Updating object; you're not creating multiple instances of that data.

It seems like in this case, you don't want to share any state between two update events. Try this pattern instead:

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