javascript - 如何不递归地触发事件？

我正在尝试成功上传文件后发送表单，然后清理该表单以让用户上传另一个文件，问题是，如果我是第一次上传，则该表单发送一次，如果我上传了第二次，表格只发送了两次，而应该只发送一次，第三次上传另一个文件，表格被发送了3次。

我希望用户每次上载新文件时都发送一次表单，无论他执行了多少次。

这是我的代码：

 $("#send-pc").off('click').on("click",function(){
      var data = {};
        console.log('hi')
        myDropzone.processQueue()
        test_cpt = 0;
        myDropzone.on("queuecomplete",function(file){
          $("#form-pc").serializeArray().map(function(x){data[x.name] = x.value;})
          data["filename"] = myDropzone.files[0].name
          data["token"] = oauthToken
          console.log(data["filename"])
          test_cpt = test_cpt + 1
          $.post("/add-docs-pc",data).done(function(resp){
          if(resp == "200"){
            alert("Vos documents on été ajouté à la platforme")
            reset_form()
            myDropzone.removeFile(file)

          }
          else{
            console.log("ERROR")
          }
          })
        });//queuecomplete Callback

      });

当我第二次上载另一个文件时，当test_cpt被选中时，它应该是2，所以我确定递归调用了事件“ queuecomplete”。如何实现我想要的并退出此循环？有没有办法杀死那个事件而不破坏我的物体？

我正在寻找与DropeZone JS无关的通用JS方法

最佳答案

看起来每次提交某些内容时，外部点击功能就会运行-每次外部点击功能都会运行，新的处理程序会附加到myDropzone此处：

myDropzone.on("queuecomplete",function(file){

发送响应后，您需要删除处理程序，以便后续的单击，上传和queuecomplete不会触发先前附加的处理程序。要么将处理程序声明为一个函数并在最后使用.off，要么简单地使用jQuery的.one，以便处理程序一旦被调用便自动解除绑定：

function queueCompleteHandler(file) {
  $("#form-pc").serializeArray().map(function(x){data[x.name] = x.value;})
  data["filename"] = myDropzone.files[0].name
  data["token"] = oauthToken
  console.log(data["filename"])
  test_cpt = test_cpt + 1
  $.post("/add-docs-pc",data).done(function(resp){
    if(resp == "200"){
      alert("Vos documents on été ajouté à la platforme")
      reset_form()
      myDropzone.removeFile(file)

    }
    else{
      console.log("ERROR")
    }
  });
  // Remove the handler if you used `on` instead of `one`:
  // myDropzone.off("queuecomplete", queueCompleteHandler);
}

myDropzone.one("queuecomplete", queueCompleteHandler);