防止执行提交功能的多个Javascript

Question

我正在使用以下代码来允许用户向在线论坛提交内容：

$('form').submit(function(){
            var form = $(this);
            var name =  form.find("input[name='name']").val();
            var code =  form.find("input[name='code']").val();
            var content =  form.find("input[name='content']").val();

            if (name == '' || content == '')
                return false;

            $.post(form.attr('action'), {'name': name, 'code' : code, 'content': content}, function(data, status){
                $('<li class="pending" />').text(content).prepend($('<small />').text(name)).appendTo('ul#messages');
                $('ul#messages').scrollTop( $('ul#messages').get(0).scrollHeight );
                form.find("input[name='content']").val('').focus();
            });
            return false;
        });

不幸的是，如果用户快速按下Enter键或快速单击发送按钮，该代码将执行多次，并且其消息将发送多次。

如何修改代码以防止多次执行？

Answer 1

一个简单的客户端修补程序是创建一个局部变量，该变量跟踪是否已提交任何东西，并且只有在为false时才执行该函数。

var submitted = false;

$('form').submit(function(){
            var form = $(this);
            var name =  form.find("input[name='name']").val();
            var code =  form.find("input[name='code']").val();
            var content =  form.find("input[name='content']").val();

            if (name == '' || content == '')
                return false;

            if (submitted)
                return false;

            submitted = true;

            $.post(form.attr('action'), {'name': name, 'code' : code, 'content': content}, function(data, status){
                $('<li class="pending" />').text(content).prepend($('<small />').text(name)).appendTo('ul#messages');
                $('ul#messages').scrollTop( $('ul#messages').get(0).scrollHeight );
                form.find("input[name='content']").val('').focus();
            });
            return false;
        });

更好的解决方案是将交易的唯一令牌发送给客户端，并让客户端将其与请求一起发送。您可能已在服务器端进行了编码，以验证令牌仅被使用过一次。

Answer 2

找到此解决方案here

 $("form").submit(function () {
        if ($(this).valid()) {
            $(this).submit(function () {
                return false;
            });
            return true;
        }
        else {
            return false;
    }
});