js 加锁

前端页面做提交时,为了防止用户在数据处理过程中反复提交数据,造成数据处理的冗余,以及为了防止反复提交给服务器带来不必要的负担,做一个小的锁,防止以上情况的出现。
当然用js做和服务器端做都是一样的,原理一致!

前端js做锁的程序:

js代码:
$(document).ready(function(){
var lock =false;//锁作为全局变量
$("#submit").on('click',function(){
    //如果用户提交了一次,lock被置为true,锁开启。后续在锁被关闭之前,用户都不能提交数据。
    if(lock)
    {
    //锁已经开启,在提交只会被阻断
    return  false;
    }else
    {
    //锁开启,锁关闭只能是数据被处理完毕或者刷新页面,文档重新加载
    lock = true;
    }   
   $.post(url,data,function(response){
      if(response.tip=="success")
      {
      //锁关闭,数据处理结束且操作成功
        lock = false;
      }else
      {
      //锁任然开启,数据处理完毕但是操作不成功,提示用户操作不成功,刷新页面重试。
      lock = true;
      window.location.reload();//刷新页面
      }
   },'json');
});
});

需要注意的是,锁的关闭时间并不是一定的,可以选择,操作成功后关闭,也可以选择只要服务器处理完毕就关闭。
当然类似这样的机制数不胜数,比如可以设置时间,只要2次提交时间短于设定时间就认为是重复提交,或者检查提交的数据是否一致以及设定程序提交后前端页面的事件不可执行,给后端留时间等方式。
方式的多种多样,各有优缺点!

你可能感兴趣的:(web前端开发,web开发,js/jq,总结,前端基础,前端,javascript,程序加锁,反复提交,ajax反复提交)