javascript之jQuery 事件处理程序如何排队和执行

zhujiabin 阅读:43 2023-11-05 18:46:41 评论:0

我有一个输入表单,带有一个提交按钮。我不希望用户能够双击提交按钮并双击提交表单...

所以我在我的表单中添加了以下 jQuery:

var prevSubmitTime = new Date('2000-01-01'); 
 
function preventFromBeingDoubleSubmitted() { 
    $('form').each(function () { 
        $(this).submit(function (e) { 
            if ($("form").valid()) { 
                var curSubmitTime = new Date($.now()); 
 
                // prevent the second submit if it is within 2 seconds of the first submit 
                if (curSubmitTime - prevSubmitTime < 2000) { 
                    e.preventDefault(); 
                } 
                prevSubmitTime = new Date($.now()); 
            } 
        }); 
    }); 
} 
 
$(document).ready(function () { 
    preventFromBeingDoubleSubmitted(); 
}); 

上面的代码存储提交时间并防止第二次提交,如果太早(小于2秒),我不想永久禁用提交按钮,以防出现服务器端错误.. .

此代码可以满足我的要求,但是在调试代码时,我永远无法在 e.preventDefault(); 上打断点...即使我双击提交按钮也是如此。

看起来第二个提交事件正在等待第一个提交事件完成后再触发。

但是,如果我删除 preventFromBeingDoubleSubmitted() 函数,那么我将能够通过双击提交按钮来双重提交表单。

谁能解释为什么有时提交事件会一个接一个地立即触发……而有时却不是这样?将事件处理程序放在 .each() 中会影响它们的执行行为吗?

请您参考如下方法:

表单在提交时默认导航到设置的action url。在没有明确设置的情况下,url 是当前页面。第一个提交调用将结束启动导航过程。在此期间,当前加载的 javascript 代码被卸载。这包括事件处理程序。因此,为什么您会遇到是否能够双重提交的不一致。如果网络请求和其他页面进程对操作 url 的发生速度快于您再次单击事件处理程序所需的速度,则不会再次调用/到达您的断点,因为它们已经卸载。反之亦然,如果网络请求较慢,您将能够调用处理程序并到达断点(如果尚未卸载)。

您说您不想永久禁用提交按钮,但即使您禁用它,表单提交也会导致页面更改,在您的示例中,这只会加载具有新提交的同一页面按钮将不再被禁用,因为它是一个新页面。因此,它从一开始就永远不会真正永久禁用。

现在,如果您的真实表单实际上并没有进行正常的表单提交,并且您使用的是 ajax 请求、网络套接字连接等,那么您可以在在 ajax 请求回调、web 套接字事件等中请求和取消设置。

例如:

jQuery('form').on('submit',function(e){ 
  e.preventDefault(); 
  var fd = new FormData(this); 
  jQuery('yourbutton').prop('disabled',true); 
  fetch('url',{method:"post",body:fd}).then(()=>jQuery('yourbutton').prop('disabled',false)); 
}); 


标签:jquery
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

全民解析

全民解析

关注我们