Javascript JQuery断头台：多个更改事件触发

有人能给我一些关于JQuery断头台的问题的指导吗？我花了数小时研究这个问题，无法找到正确的解决方案。我遇到的问题是，在我更改图像后，eventOnChange多次触发。每个事件在每次连续图像交换时触发+1

我已研究了此链接，但仍无法找到有效的解决方案：

我已经解决了这个问题，在发布表单时，我停止了活动，只捕获了我需要的相关信息，但我真的很困扰，我找不到一个解决方案来利用活动

以下是正在发生的事情的简要总结：

使用默认用户头像加载页面

用户可以在断头台内操纵化身，每次操纵（放大、缩小、旋转、调整等）都会触发一次onchange事件

用户打开文件读取器以选择新的化身

新化身已成功加载（正确缩放和尺寸）

用户操纵图像，但每个操纵事件都会触发多次。例如，向右旋转将在用户选择新化身后将图像旋转两次（180度）

如果用户再次打开文件读取器，图像将触发三次。还有一个。用户选择新化身的1+x倍

在重新加载图像和初始化插件之前，我已经尝试解除绑定事件，但它并没有解决问题。非常感谢您的帮助

相关代码如下

JavaScript:

<script type="text/javascript" charset="UTF-8">
function showData (data) {
  data.scale = parseFloat(data.scale.toFixed(4))
  for(var k in data) { $('#'+k).html(data[k]) }
}

function loadInterface(picture) {
  showData(picture.guillotine('getData'))

  // Bind button actions
  if(!picture.data('isBound')){
    picture.data('isBound', true)
    $('#rotate_left').click(function(){ picture.guillotine('rotateLeft') })
    $('#rotate_right').click(function(){ picture.guillotine('rotateRight') })
    $('#fit').click(function(){ picture.guillotine('fit') })
    $('#zoom_in').click(function(){ picture.guillotine('zoomIn') });
    $('#zoom_out').click(function(){ picture.guillotine('zoomOut') })
  }

  // Update data on change
  picture.on('guillotinechange', function(e, data, action) { 
    console.log('guillotine onchange event called!')
    showData(data);
    console.log(action); 
  })
}

function loadGuillotine (picture, data) {
  if(picture.guillotine('instance')){ picture.guillotine('remove') }

  // Load plugin
  picture.guillotine({
    width:  data['w'],
    height: data['h'],
    init:   data,
    eventOnChange: 'guillotinechange'
  })
}

$(document).ready(function() {
  var picture = $('#useravatar')
  var data    = { w: 250, h: 250, angle: 0, scale: 1 }

  picture.on('load', function() {

    // Load guillotine and controls
    picture.guillotine('remove')
    loadGuillotine(picture, data)
    loadInterface(picture)

    // Transform picture to fit, center
    picture.guillotine('fit').guillotine('center')
  })
})

function ReloadImage(){
  var reader = new FileReader();
  reader.readAsDataURL(document.getElementById("avatar_input").files[0]);
  reader.onload = function (oFREvent){
    document.getElementById("useravatar").src = oFREvent.target.result;
  }  
}
</script>

函数showData（数据）{
data.scale=parseFloat（data.scale.toFixed（4））
对于（数据中的var k）{$（'#'+k）.html（数据[k]）而言
}
功能加载接口（图片）{
showData（picture.guillotine（'getData'））
//绑定按钮操作
如果（！picture.data（'isBound'））{
picture.data（'isBound'，true）
$（“#向左旋转”）。单击（函数（）{picture.guillotine（'rotateLeft'））
$（“#向右旋转”）。单击（函数（）{picture.guillotine（'rotateRight'））
$（'fit'）。单击（函数（）{picture.guillotine（'fit'）}）
$（'zoom#u in'）。单击（函数（）{picture.guillotine（'zoomIn'）}）；
$（“#缩小”）。单击（函数（）{picture.guillotine（'zoomOut'））
}
//更新有关变化的数据
图.on（'guillotinchange'，函数（e，数据，动作）{
log（'guillotine onchange事件已调用！'）
showData（数据）；
控制台日志（操作）；
})
}
功能加载断头台（图片、数据）{
if（picture.guillotine（'instance'）{picture.guillotine（'remove'）}
//加载插件
断头台({
宽度：数据['w']，
高度：数据['h']，
init：数据，
事件更改：“断头台更改”
})
}
$（文档）.ready（函数（）{
var picture=$（“#useravatar”）
变量数据={w:250，h:250，角度：0，比例：1}
picture.on（'load'，function（））{
//加载断头台和控制装置
图.断头台（“移除”）
装载切碎机（图片、数据）
加载界面（图片）
//将图片变换到合适的中心位置
图片。断头台（'fit'）。断头台（'center'））
})
})
函数重载映像（）{
var reader=new FileReader（）；
reader.readAsDataURL（document.getElementById（“avatar_输入”）.files[0]）；
reader.onload=函数（OFRENT）{
document.getElementById（“useravatar”）.src=ofretent.target.result；
}  
}

在Ruby页面中：

<div id='content'>
  <h1>Select Avatar</h1>

  <%= form_for(@avatar, url: save_avatar_path, method: :patch) do |f| %>
  <%= render 'shared/errors', object: @avatar %>

    <div class='frame'>
      <%= image_tag 'default-user-avatar.jpg', :id => :useravatar %>
    </div>

    <div id='controls'>
      <button id='rotate_left'  type='button' title='Rotate left'> &lt; </button>
      <button id='zoom_out'     type='button' title='Zoom out'> - </button>
      <button id='fit'          type='button' title='Fit image'> [ ]  </button>
      <button id='zoom_in'      type='button' title='Zoom in'> + </button>
      <button id='rotate_right' type='button' title='Rotate right'> &gt; </button>
    </div>

    <div id='controls'>
      <%= f.hidden_field :image, value: @avatar.cached_image_data %>
      <%= f.file_field :image, :class => :form_field, :id => :avatar_input, :onChange => "ReloadImage()" %>
    </div>

    <ul id='data'>
      <div class='column'>
        <li>x: <span id='x'></span></li>
        <li>y: <span id='y'></span></li>
      </div>
      <div class='column'>
        <li>width:  <span id='w'></span></li>
        <li>height: <span id='h'></span></li>
      </div>
      <div class='column'>
        <li>scale: <span id='scale'></span></li>
        <li>angle: <span id='angle'></span></li>
      </div>
    </ul>
  <% end %>
</div>

选择化身
：useravatar%>
- 
[ ]  
+ 
：form_字段，：id=>：avatar_输入，：onChange=>“ReloadImage（）”%>

x:
y:
宽度：
高度：
比例：
角度：

我没有测试你的代码，但我相信/猜测你掉进了我曾经发现自己陷入的陷阱

.click（）将函数事件应用于循环的每次迭代，因此会触发多个更改事件（因此，如果循环调用三次，则事件将按顺序添加三次）

尝试使用。而不是。单击（）

---

另一个可能的解决方案是使用.off（）.click（），但它会产生开销。

我认为这不是click函数。虽然事件在单击时触发多次，但在执行此行时加载图像时，事件也会触发多次：//将图片转换为适合，居中图片。guillotine（'fit'）。guillotine（'center'）我相信每次连续更改图像后都会连接多个侦听器。