javascript - 提交网络表单时去抖点击

Question

与我们交互的后端系统编写不当，无法处理我们产生的负载。当他们解决他们的负载问题时，我们正在尝试减少我们产生的任何额外负载，其中之一是后端系统继续尝试和服务表单提交，即使另一个提交来自同一用户。

我们注意到的一件事是用户双击表单提交按钮。我需要消除这些点击，并防止第二次提交表单。
我的方法(使用 Prototype)将 onSubmit 放在调用以下函数的表单上，该函数隐藏表单提交按钮并显示“正在加载...”div。

function disableSubmit(id1, id2) {
    $(id1).style.display = 'none';
    $(id2).style.display = 'inline';
}

我发现这种方法的问题是，如果我在“正在加载...”div 中使用动画 gif，它加载正常但在提交表单时没有动画.

有没有更好的方法来执行此去抖动并在等待表单结果(最终)加载时继续在页面上显示动画？

Answer 1

使用 Prototype，您可以使用此代码查看是否已提交任何表单，并在提交时禁用所有提交按钮:

document.observe( 'dom:loaded', function() { // when document is loaded
    $$( 'form' ).each( function( form ) { // find all FORM elements in the document
        form.observe( 'submit', function() {  // when any form is submitted
            $$( 'input[type="submit"]' ).invoke( 'disable' );  // disable all submit buttons
        } );
    } );
} );

这应该有助于双击提交按钮的用户。但是，仍然可以通过任何其他方式提交表单(例如，在文本字段上按 Enter)。为防止这种情况，您必须在第一个表单提交之后开始监视任何表单提交并停止它:

document.observe( 'dom:loaded', function() {
    $$( 'form' ).each( function( form ) {
        form.observe( 'submit', function() {
            $$( 'input[type="submit"]' ).invoke( 'disable' );
            $$( 'form' ).observe( 'submit', function( evt ) { // once any form is submitted
                evt.stop(); // prevent any other form submission
            } );
        } );
    } );
} );