javascript - 当用户单击提交按钮时 - 如何在使用 Javascript 激活它之前等待 1 秒？

Question

我正在尝试集成一个 API，每次用户单击提交按钮表单时该 API 都会起作用。这是有效的，只是 API 没有时间激活，因为我们直接重定向到另一个页面。

所以，我正在寻找一种方法，当用户单击按钮时......仅在 1 或 2 秒后才会重定向。

我已经尝试过:

submitButton.addEventListener("click", function() {
  submitButton.setAttribute("disabled", "disabled");

  // Removes disabling after 2 seconds
  window.setTimeout(function() {
      submitButton.removeAttribute("disabled");
  }, 2000);
},false);

但正如所料，使用该功能时，该按钮根本不起作用。 从逻辑上讲，我应该在 setTimeout 函数上插入重定向或不重定向用户的函数。

问题是:这是一个客户的 prestashop 网站，我不知道这个函数的名称。

如果你有任何想法... 谢谢你!

P.S:我正在使用 Google 跟踪代码管理器，但 Jquery 无法在其上运行。

Answer 1

首先，无论您最终采用哪种解决方案，event.preventDefault() 都将成为您的 friend 。这将阻止正常事件 Hook 触发。

您需要阻止单击事件实际执行其应执行的操作，而不是仅将按钮标记为禁用。因此，preventDefault()。

以下代码将阻止点击发生 沿着这些思路的东西应该有效:

(function(){
  // set flag to indicate whether we should wait or actually submit
  var delaySubmit = true;
  // get form el
  var form = document.getElementById('#YourFormId');
  form.addEventListener("submit", function(e) {

    // if we've already waited the 2 seconds, submit
    if( ! delaySubmit )
      return;

    // otherwise, stop the submission
    e.preventDefault();
    // set the flag for next time
    delaySubmit = false;

    // and resubmit in 2 seconds. 
    window.setTimeout(function() {
        this.submit();
    }, 2000);
  });
})();