Question

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

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

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

我用这种方法发现的问题是，如果我在“loading ...”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
            } );
        } );
    } );
} );

Answer 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); 
    };

}

Answer 3

如果你有方便的jQuery，请附上一个click（）事件，在初次提交后禁用该按钮 -

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

那种事。

Answer 4

您可以尝试在input（type = submit）元素上设置“disabled”标志，而不仅仅是更改样式。这应该完全关闭浏览器端的。

请参阅：http://www.prototypejs.org/api/form/element#method-disable

Answer 5

使用AJAX提交表单，GIF将设置动画。

在提交网络表单时进行去抖动

5 个答案: