javascript - jQuery事件处理程序是如何排队和执行的?

  显示原文与译文双语对照的内容

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

因此,我在表单中添加了以下 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();


});



如果 too early early 上面 代码存储提交时间并阻止第二次提交,我不想永久禁用提交按钮,以防出现服务器旁错误。

这段代码做我想要的,但是调试代码时,我永远不会碰到 e.preventDefault();的断点。 即使我双击提交按钮。

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

但是,如果我删除 preventFromBeingDoubleSubmitted() 函数,那么我可以双击表单,双击提交按钮。

任何人可以解释为什么有时提交事件会立即被触发一个。 有时候情况并非如此? 是否将事件处理程序 inside .each() 放置在它的执行行为中?

时间:

在你的代码Fragment中,我添加了一些可能有用的日志。 当你要求一个上的问题时,我将逐一回答。


var prevSubmitTime = new Date('2000-01-01');



function preventFromBeingDoubleSubmitted() {


 $('form').each(function () {


 $(this).submit(function (e) {


 console.log('I am going to submit form');


 if ($("form").valid()) {


 var curSubmitTime = new Date($.now());


 console.log('I am a valid form')


//prevent the second submit if it is within 2 seconds of the first submit


 if (curSubmitTime - prevSubmitTime <2000) {


 console.log('A small time difference. So I am stopping')


 e.preventDefault();


 }


 prevSubmitTime = new Date($.now());


 }


 });


 });


}



$(document).ready(function () {


 preventFromBeingDoubleSubmitted();


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<form id="myform">


 <input type="text" name="q" required="required"/>


 <br/>


 <input type="text" name="bar" required="required"/>


 <br/>


 <br/>


 <input type="submit"/>


</form>

任何人可以解释为什么有时提交事件会立即被触发一个。 有时候情况并非如此?

我想你已经自己回答这个问题了。 你正在添加代码,以检查你第一次单击提交按钮和第二次时间之间是否存在差异。 如果存在时间差异,则停止第二个表单提交。

我永远不会碰到 e.preventDefault()的突破点

你无法获取控制台的原因是,单击提交按钮时,你将从该页面重定向。 所以控制台被清除了。 如果要查看控制台,请使用ajax函数提交表单。 在返回时,你可以将页面重定向到。

将事件处理程序 inside 放置。每个( ) 都会影响它的执行行为?

不,只是个迭代器。 它不会影响提交功能。

我已经添加了一个指向jsfiddle的链接。 在preventDefault前添加警告将阻止页面暂时重定向。 这将证明执行发生了。

http://jsfiddle.net/2vugwyfe/

...