无法在数组中正确保存对象

Question

var currentState = 1;
var mainImage);
$.fn.mapImage.saveImage = function(image) {
    if (imageState[currentState] != undefined) {
        imageState.splice(currentState - 1);
        imageState.push($.extend(true, {}, image));
    } else {
        imageState.push($.extend(true, {}, image));
    }
    currentState++;
    mainImage = image;
}
$.fn.mapImage.undoImage = function() {
    if (currentState != 1) {
        currentState--;
        mainImage = imageState[currentState - 1];
        $.fn.mapImage.loadState(imageState[currentState - 1]);
    }
}
$.fn.mapImage.loadState = function(image) {
    mainImage = image;
}

If I call saveImage a few times and increase the currentState, then call undoImage a couple times, and then call saveImage again it will go through that if statement inside of saveImage. For some reason that imageState that is pushed on in the if statement (inside saveImage) mirrors any image that is pushed on to the array after that, it will just mirror the most recently pushed on one. I have a feeling there is a reference problem somewhere, but I cant seem to find it.

Answer 1

I have not worked with JavaScript OR jQuery extensively, but I will do my best to help you out.

First, a simple coding error. Line 2 should be: var mainImage; Remove the extra parenthesis.

In saveImage you check to see if currentState is in use. Then you splice from (currentState-1). This may be deleting one too many images? Or you may be checking one too few images? I'm not sure, but one of these seems to be the case. Look at the following:

$.fn.mapImage.saveImage = function(image) {
if (imageState[currentState-1] != undefined) {
    imageState.splice(currentState - 1);
    imageState.push($.extend(true, {}, image));
} else {
    imageState.push($.extend(true, {}, image));
}
currentState++;
mainImage = image;
}

Finally, undoImage seems to be redundant in setting mainImage and then calling loadState (which does the same thing). You should stick with one method of changing mainImage.

Answer 2

I read the question as follows:

Goal:

• The program should contain a undo/redo history of a single image
• When an image is saved, a new item is pushed on top of the undo/redo history
• When undo is called, the previous image is used instead of the latest
• When image is saved again the undo/redo history is truncated so that the latest saved image replaces all the images that were saved after the last undo step.

Problem:

• You are wondering why saving an image truncates the redo history and what to do about it

Answer:

• Saving a new image truncates the history and thus mirrors only the latest image
• You have to use a redo to select the next step instead of save image or if you want the image to be saved to top of the history then get rid of the splice.

Some modifications:

$.fn.mapImage = function() {
  // changed the currentState to start at 0 as you repeated currentState - 1 three times
  // while used the currentState as is only once. 
  var currentState = 0;
  var mainImage;
  var imageState = [];

  this.saveImage = function(image) {
    // Truncates the redo history as redos are no longer
    // valid. Start a new history using the latest saved
    // image.
    if (imageState[currentState + 1] != undefined) {
        // XXX: splice(index) is not standard, you should use 
        // splice(index, howMany) instead 
        imageState.splice(currentState + 1, imageState.length);
    }
    // The rest of the if branch and the else branch were identical
    // No need for the else branch
    imageState.push($.extend(true, {}, image));
     // It's more consistent to set the main image the same way
    // each time by using the loadState function as you already did
    // in undo image. 
    this.loadState(imageState[currentState]);
    currentState++; 
  };
  this.undoImage = function() { 
    // replaced != 1 with > 0 to prevent defects
    if (currentState > 0) {
        currentState--;
        // You set the main image in loadState 
        // so you don't have to set it here
        // mainImage = imageState[currentState];
        this.loadState(imageState[currentState]);
    }
  };
  this.redoImage = function() { 
    if (currentState + 1 < imageState.length) {
        currentState++;
        this.loadState(imageState[currentState]);
    }
  };
  this.loadState = function(image) {
    mainImage = image;
  };
}

You can play with with this fiddle.