提交 Web 表单时反跳点击答案

【问题标题】：Debounce clicks when submitting a web form提交 Web 表单时反跳点击
【发布时间】：2010-09-11 00:13:34
【问题描述】：

我们与之交互的一个编写不佳的后端系统在处理我们产生的负载时遇到了麻烦。虽然他们修复了负载问题，但我们正在尝试减少我们生成的任何额外负载，其中之一是后端系统继续尝试为表单提交提供服务，即使另一个提交来自同一用户。

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

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

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

在等待表单结果（最终）加载的同时，是否有更好的方法来消除弹跳并继续在页面上显示动画？

【问题讨论】：

这么长时间没有选择答案？啦啦啦
呃，你的意思是除了我选的那个？（你的回答，不少于）我没有投票，因为虽然它回答了问题，但它不是原型。

标签： javascript html prototypejs

【解决方案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
            } );
        } );
    } );
} );

【讨论】：

【解决方案2】：

以上所有好的建议。如果你真的想像你说的那样“去抖动”，那么我有一个很好的功能。更多详情unscriptable.com

var debounce = function (func, threshold, execAsap) {

    var timeout;

    return function debounced () {
        var obj = this, args = arguments;
        function delayed () {
            if (!execAsap)
                func.apply(obj, args);
            timeout = null; 
        };

        if (timeout)
            clearTimeout(timeout);
        else if (execAsap)
            func.apply(obj, args);

        timeout = setTimeout(delayed, threshold || 100); 
    };

}

【讨论】：

【解决方案3】：

如果你有 jQuery，请附加一个 click() 事件，在初始提交后禁用按钮 -

$('input[type="submit"]').click(function(event){
 event.preventDefault();
 this.click(null);
});

那种东西。

【讨论】：

我发现 jQuery 更好的是 onesubmit() manalang.com/jquery/docs/index.html#onesubmit-fn
评论中的死链接
这并不令人满意。代码可以在按下按钮之后但在实际提交之前执行验证和其他任务。因此，您将无法避免正确消除点击。
是的，令人惊叹的过去 - 我想 jquery 真的已经存在了十多年了！而不是删除点击事件（以防您以后需要使用它），禁用提交按钮（如下@Fczbkk的answered）或禁用整个表单（如here所述）可能更有意义跨度>

【解决方案4】：

您可以尝试在输入 (type=submit) 元素上设置“禁用”标志，而不仅仅是更改样式。这应该完全关闭浏览器端的 from。

见：http://www.prototypejs.org/api/form/element#method-disable

【讨论】：

【解决方案5】：

使用 AJAX 提交表单，GIF 就会动画。

【讨论】：