JavaScript代码执行多次

Question

我创建了一个简单的网页来进行基本的图像处理。 我使用php上传图像，并使用Python（cgi脚本）调整图像的大小（如果宽度或高度分别超过600px或400px）（通过ajax调用）。

这是场景：

1. 用户选择图像。
2. 用户点击上传按钮。
3. 这upload.php ajax调用upload.php将该文件上传到服务器。
4. 成功后，如果图像大于最大宽度和高度，则再次调用ajax调用resize.py （cgi脚本）以调整图像大小。
5. 成功后，将调整大小的图像绘制到画布上。
6. 用户点击Run按钮。 （图像更改为GrayScale）。
7. 用户点击Reset按钮。 （原始图像绘制到画布上）。

直到这里一切都正常。

现在，如果用户选择了另一个图像，然后将其上传并单击“ Run按钮，则此Run按钮事件触发的功能将执行两次。 如果按下Reset按钮，则此事件触发的功能将执行3次。

如果上传了^第三张图像，则按下“ Run按钮时，将执行“ Run按钮事件3次；如果按下“ Reset按钮，则将执行该函数6次。 如果上传了其他图像，它将继续添加。

我还有其他两个图像效果，以及它们的相同问题。 我不知道如何解决此问题。 任何人都知道为什么会这样吗？ 我该如何解决这个问题？

参见实际代码（上一张幻灯片）：

http://#########/Main/JS/javascript.html

JavaScript的：

$('#grayscaleButtonUpload').click(function() {

  var input = document.getElementById('imageLoader');
  imageName = input.value;
  var file = input.files[0];

  if(file != undefined) {
    formData= new FormData();
    if(!!file.type.match(/image.*/)) {
      formData.append("image", file);

      // Make the ajax call to upload the image
      $.ajax({
        url: "upload.php",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function(data) {
          var input = document.getElementById('imageLoader');
          imageName = input.value;
          var file = input.files[0];
          formData = new FormData();
          formData.append("filename", file.name);

          // Make the ajax call to resize the image
          $.ajax({
            url: "http://##########/Main/cgi-bin/resize.py",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(data) {
              console.log(data);
              var grayscaleCanvas = document.getElementById("imageCanvas");
              var grayscaleCtx = grayscaleCanvas.getContext("2d");
              var grayscaleImage = new Image();

              grayscaleImage.src = "http://###########/Main/JS/upload/" + file.name;
              $(grayscaleImage).load(function() {

                if (!grayscaleCanvas.toDataURL() == document.getElementById('imageCanvas').toDataURL()) {
                    grayscaleCtx.clearRect(0, 0, grayscaleCanvas.width, grayscaleCanvas.height);
                    $('#imageCanvas').css({"border":"none", "border-color": "none"});
                };

                grayscaleCanvas.width = grayscaleImage.width;
                grayscaleCanvas.height = grayscaleImage.height;
                grayscaleCtx.drawImage(grayscaleImage, 0, 0);
                $('#imageCanvas').css({"border":"ridge", "border-color": "green"});

                // Run button event
                $("#grayscaleButtonRun").click(function() {
                  console.log('Run button pressed')
                  var grayscaleImageData = grayscaleCtx.getImageData(0, 0, grayscaleCanvas.width, grayscaleCanvas.height);
                  var grayscalepixels = grayscaleImageData.data;
                  var grayscaleNumPixels = grayscaleImageData.width * grayscaleImageData.height;

                  for (var i = 0; i < grayscaleNumPixels; i++) {
                    var avg = (grayscalepixels[i * 4] + grayscalepixels[i * 4 + 1] + grayscalepixels[i * 4 + 2]) / 3;
                    grayscalepixels[i * 4] = avg;
                    grayscalepixels[i * 4 + 1] = avg;
                    grayscalepixels[i * 4 + 2] = avg;
                  };

                  grayscaleCtx.clearRect(0, 0, grayscaleCanvas.width, grayscaleCanvas.height);
                  grayscaleCtx.putImageData(grayscaleImageData, 0, 0);

                  // Reset button event
                  $('#grayscaleButtonReset').click(function() {
                    console.log('Reset button pressed')
                    grayscaleCtx.clearRect(0, 0, grayscaleCanvas.width, grayscaleCanvas.height);
                    grayscaleCanvas.width = grayscaleImage.width;
                    grayscaleCanvas.width = grayscaleImage.width;
                    grayscaleCtx.drawImage(grayscaleImage, 0, 0);
                  });
                });
              });
            }
          });
        }
      });
    } else {
      alert('Selected file is not an image!');
    }
  } else {
  alert('No File Selected!');  
  }
});

Answer 1

事件处理程序会在按钮上添加新的click处理程序，而不会删除其中的按钮。

理想情况下，您应该只对每个处理程序添加一次：在pageload上添加静态元素，在DOM上添加动态创建的元素。

可替换地，哈克解决方法是使用.off （相反.on只是增加一个新之前），以除去来自元件的特定类型的所有处理程序。