防止用户多次提交表单记录

 require.async(['/plugins/layer-v1.8.4/skin/layer.css','/plugins/layer-v1.8.4/layer.min'],function(){//异步加载弹出框
	$("#getScore").click(function calculateResult(form) {//点击事件
		//上面传递参数时，如果data为数据，一般会这么添加：	
		var row2 = {name: 'peter', age: '23'};
		var data = [];
		data.push(row1);
		data.push(row2);
		 $.ajax({
		    type:"post",
		    traditional:true,
		    url:"/exam/resultProcess.html",
		    dataType:"json",
		    data:{param:data,examId:examVal},
		    success:function(param){
			var level = param.level;
			
			$.layer({
				type :1,
				title : "<span class='tipsTitle'><b>风险承受能力测试</b></span>",
				closeBtn :[0,true],
				area: ['400px', '200px'],
				border : [10 , 0.3 , '#000', true],
				btns:2,
				btn : ['重新测试','关闭'],
				page: {
					html:"<div style='padding:20px;font-size:16px;'>您的得分为：<strong class='red-code'>"+param.score+"分</strong>，属于<strong class='red-code'>"+uLevel+"</strong>投资者</div>"
				},
				yes:function(){
					layer.closeAll();
					clearAnswers();
				},
				no: function(){
					layer.closeAll();
				}
			});		
		    }
		});
	});
});
//理解：点击事件触发弹出提示框，询问重新测试还是关闭。

ajax请求处理防止用户多次提交表单

$.ajax({
        url: 'login.do',
        data: params,
        type: 'post',
        beforeSend: function () {
            // 让提交按钮失效，以实现防止按钮重复点击
            $(loginBtn).attr('disabled', 'disabled');

            //给用户提供友好状态提示
            $(loginBtn).text('登录中...');
        },
        complete: function () {
            //让登陆按钮重新有效
            $(loginBtn).removeAttr('disabled');
        },
        success: function(msg){

            if (msg === 'ok') {
                alert('登录成功！');

                //TODO 其他操作...
            } else {
                alert('登录失败，请重新登录！');
            }

        }
    });

项目中无法使用原生js获取元素，这里btn的属性没有办法修改，所以想到前端节流函数：

var timer = null;
uiEvents.updateForm = function(){
    var value = $(this).val();
    clearTimeout(timer); 
    //如果连续快速触发提交按钮，不会向后台发请求，但是最后会进行一次请求的。
    timer = setTimeout(function() {
        //触发请求
        $.ajax({
            url: '/user/list',
            type: 'get',
            data: params,
            success: function () {
                //显示匹配结果
                //......
            }
        });
    },1000);
    
}

初步实现了防止用户多次提交，经测试发现有时候还是会出现多次提交的情况，并且设置1s后响应，在网络状况良好的情况，用户会觉得响应时间慢的体验，下面是终极杀招：

function executeOnce(fn, context) { 
    var result;
    return function() { 
        if(fn) {
            result = fn.apply(context || this, arguments);
            fn = null;
        }
        return result;
    };
}
uiEvents.updateClick = executeOnce(function() {
	$.ajax({
        data: options,
        url: '${apiBaseUrl}/workItemUpdate.json',
        dataType: 'json',
        success: function(data) {
            if(data.code==200){
                window.location.reload(); 
                rav.message('操作成功');    
            }else if(data.code==500){
                rav.message( {"type":"error","content":data.message})    
            }
        }
    });
}

这样就实现了表单只能提交一次的效果，提交成功页面跳转。

参考：浅谈一下如何避免用户多次点击造成的多次请求

7 个基本的 JS 函数