Estoy realmente confundido acerca de esto.

Se trata de guardar dibujos de lienzo html en la base de datos. tengo dos variables:

 let canvasesData = []; let savedCanvasesData = [];

canvasesData contiene los nuevos datos y savedCanvasesData contiene los datos que se han guardado en el servidor. La primera vez que se ejecuta este código, todo funciona bien, pero cuando se ejecuta por segunda vez (o más), las cosas se ponen extrañas.

 $(document).on('click', '#saveDrawings', function(){ console.log(canvasesData); // This is identical to canvasesData after the update (3 lines down,) why? console.log(savedCanvasesData); // This is identical to canvasesData at the second run, how is this possible? canvasesData[currentCanvas] = {'img': canvas.toDataURL('image/jpeg', 1), 'txt': $('#drawingDescr').val()}; console.log(canvasesData); if(!arrayIsEqual(canvasesData, savedCanvasesData)){ //This doesn't run the second time, because the arrays are identical, which shouldn't be so. let toSave = canvasesData; data = {'imgs': toSave}; $.post('/APIUrl', data, function(response){ // The only explanation I have is that this is the first thing that runs // when the button is pressed. But when I console.log() the following line // it tells me it runs only after the response, like it should. savedCanvasesData = canvasesData; }); } });

En ningún otro lugar utilizo la matriz savedCanvasesData . Uso la matriz canvasesData en otros lugares, pero estas funciones no se llaman en este proceso, por lo que no se pueden cambiar. Estoy realmente confundido en cuanto a cómo se puede actualizar esto antes de que se ejecute el código onClick.