防止快速连续点击按钮重复提交数据之二(定时器实现)

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_15783243/article/details/72353580

动态给div添加点击事件,当点击完成后就将当前点击事件移除,并提交数据,然后使用定时器间隔一定时间重复给div上绑定点击事件


事例代码如下(1):提交单纯得div


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>jQuery防止click双击多次执行及传递动态函数方法</title> 
<script type="text/javascript" src="http://www.86y.org/js/jquery.min.js"></script> 
</head> 

<body> 
<div id="show">显示测试结果:</div> 
<div style="background:#f60;color:#fff;width:80px;padding:10px 20px;" id="div" >点击我吧</div> 

<input type="button" value="按钮一" id="but1" οnclick="ss2('INPUT事件')"/> 
<script language="javascript"> 
var iTime =null;

$("#div").on('click', dofuncion);
function dofuncion() {
   $("#div").unbind('click');
    console.log(222);
	setTimeout(function(){
	iTime = $("#div").on('click', dofuncion)
	},2000);
	clearTimeout(iTime);

}

</script> 
</body> 
</html> 

事例代码如下(2):提交表单




    <form id="formID" action="" method="post" class="form">
                    <p id="numtj">你还可以输入<var style="color:#C00">--</var>个字符。</p>
                    <input type="hidden" name="relevanceUrl" id="relevanceUrl" value=""/>
                    <input type="hidden" name="relevanceType" value="${type}"/>
                    <input type="hidden" name="articleID" value="${articleID}"/>
                    <input type="hidden" name="userName" value="${userInfo.loginName}"/>
                    <input type="hidden" name="nickName" value="${userInfo.nickName}"/>
                    <input type="hidden" name="siteID" value="${firmId}"/>
                    <input type="hidden" name="uCenterUId" value="${userInfo.id}"/>
                    <input type="hidden" name="articleTitle" value="${title}"/>
                    <p class="textinput"><label><textarea id="comment_textarea" class="content_text" name="content"
                                                          cols="100" rows="5"></textarea></label>
                    </p><%--maxlength="200"--%>
                    <br>
                    <%-- <button name="huitie" type="submit" class="btn btn-info" οnclick="return savePost(this)"
                             class="SUBMIT"> 发表评论
                     </button>--%>
                    <div name="huitie" class="btn btn-info" id="div"<%-- οnclick="commentNew()"--%>
                         class="SUBMIT"> 发表评论
                    </div>
                </form>


将div显示成按钮得i形式
 <style>

        .btn-info {
            cursor: pointer;
            display: inline-block;
            border: 1px solid #ccc;
            padding: 2px 10px;
        }
    </style>


使用定时器防止表单重复提交

<script>
    var iTime = null;

    $("#commentNewId00").on('click', dofuncion);
    function dofuncion() {
        $("#commentNewId00").unbind('click');
        var relevanceUrl = window.location.href;
        $("#relevanceUrl").val(relevanceUrl);


        var userName = '${userInfo.loginName}';
        var uCenterUId = '${userInfo.id}';
        //用户登陆验证
        if ("" == uCenterUId || null == uCenterUId) {
            layer.confirm('您还没有登录,要登录吗?', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                window.location.href = 'login';
            }, function () {
                layer.msg('没有登录,不能发表评论!', {
                    time: 1000, //20s后自动关闭
                });

            });
            return false;
        }

        //是否输入内容验证
        //var textid = document.getElementById("comment_textarea");
        //var va = textid.value;
        var contentNew_1 = KindEditor.instances[0].html();
        var contentNew_2 = trimSpace(contentNew_1);
        //var length_1=va.length;
        //判断当元素输入框的值为空的时候就返回一个false  组织表单提交
        if (contentNew_2 == "" || contentNew_2 == null || contentNew_2.length < 1) {
            layer.msg('评论内容不能为空哦,写点东西吧!', {
                time: 1000, //20s后自动关闭
            });
	//失败后再次绑定点击事件
	 $("#commentNewId00").on('click', dofuncion)
return false; //判断当元素输入框的值不为空的时候就返回一个true 提交表单 } if (KindEditor.instances[0].count('text') > 200) { layer.msg('输入字数超过200字限制,请适当调整输入字数!', { time: 1000, //20s后自动关闭 });

	//失败后再次绑定点击事件
 	$("#commentNewId00").on('click', dofuncion)
return false; //判断当元素输入框的值不为空的时候就返回一个true 提交表单 } $.ajax({ cache: true, type: "POST", dataType: 'json', url: "comment/save", data: $('#formID').serialize(),// 你的formid error: function (request) { layer.msg('Connection error!', { time: 1000, //20s后自动关闭 }); }, success: function (data) { if ("1" == data) { postList(); //清空输入框 KindEditor.instances[0].html(""); } else { layer.msg('评论失败!', { time: 1000, //20s后自动关闭 }); } } }); //点击发表评论后清空输入框 // return false; setTimeout(function () { iTime = $("#commentNewId00").on('click', dofuncion) }, 1000); clearTimeout(iTime); //$("#div").on('click', dofuncion); }</script>



注意:

js写在对应表单得下方,否则会有异常



展开阅读全文

没有更多推荐了,返回首页