Aufruf der gleichen Funktion von 2 verschiedenen Ereignissen für simultanen Prozess

Question

Bitte beachten Sie, dass die Antwort sehr einfach sein könnte, da ich in JavaScript nicht zu weit fortgeschritten bin.

Ich muss die gleiche Funktion oder eine Klasse von verschiedenen Ereignissen aufrufen, um eine einfache Animation während des Prozesses durchzuführen.

Insbesondere: Wenn ein Benutzer auf eine Schaltfläche klickt, wird die AJAX-Anforderung aktiviert. Daher möchte ich diesen Prozess animieren, indem ich ein Bild (wie ein Spinner) rotiere. Während der erste Prozess läuft, kann ein Benutzer auf eine andere Schaltfläche klicken, um die ähnliche AJAX-Anforderung für ein anderes Element einzugeben, sodass das zweite Spinner-Bild sich zu drehen beginnt, während das erste noch läuft.

Das Problem, das ich habe, ist, dass, sobald ich die gleiche Klasse zum zweiten Mal anrufe, der erste aufhört. Das liegt daran, dass ich die ID der Updating.TheID ändere, aber ich dachte, Updating ist eine Klasse, die bei jedem Aufruf eine weitere Instanz initiieren sollte. Ich habe gerade gelernt, dass JavaScript keine Multithreadsprache ist, also könnte ich ein Array oder etwas verwenden, um IDs getrennt zu halten, aber ich suchte nach einem "eleganteren" Ansatz mit dem minimalen Code. Bitte um Rat.

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

Selbst wenn Sie eine new UpdateData() schaffen, die ein einzigartiges Objekt erstellen wird, wird jeder zu gleichen Updating Objekt verweisen werden; Sie erstellen nicht mehrere Instanzen dieser Daten.

Es scheint, als ob Sie in diesem Fall keinen Status zwischen zwei Aktualisierungsereignissen freigeben möchten. Versuchen Sie dieses Muster stattdessen:

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