通过节流阀 前端防止重复提交事件

案例一

    //定义一个属性,提交成功后会将属性修改为false,点击第二次的时候就会进入else
    var falg = true;
    //点击事件
    $("#save").click(function () {
        //判断属性是否为true
        if(falg ==true){
            var options = ajaxFormOptions('post', '/admin/student/create', addDialog, $table);
            //校验输入框是否为空
            var valid = $("#form").valid();
            //判断是否校验通过
            if(valid){
                //校验成功,将属性改为false
                falg = false;
                //提交保存
                $('#form').ajaxSubmit(options);
            }
        }else {
            notyError("点击成功,稍等片刻,请不要重复点击保存按钮!");
        }
    });

案例二

钢琴版导航条 
节流阀  :按下的时候,触发,如果没弹起,不让触发下一次
 //1. 定义一个flag
    var flag = true;
  按下1-9这几个数字键,能触发对应的mouseenter事件
 $(document).on("keydown", function (e) {
   if(flag) {
     flag = false;
     获取到按下的键
     var code = e.keyCode;
     if(code >= 49 && code <= 57){
         触发对应的li的mouseenter事件
       $(".nav li").eq(code - 49).mouseenter();
     }
   }
 });
弹起的时候,触发mouseleave事件
 $(document).on("keyup", function (e) {
   flag = true;
   获取到按下的键
   var code = e.keyCode;
   if(code >= 49 && code <= 57){
     触发对应的li的mouseleave事件
     $(".nav li").eq(code - 49).mouseleave();
   }
 });

 

 

 

 

 

 

 

 

 

posted @ 2021-03-05 10:45  My--style  阅读(60)  评论(0)    收藏  举报