js 防抖动、重复提交、频繁点击

• 防止重复点击

1.  
   var isclick= true;//加一个点击开关
2.  
   function click(){
3.  
   if(isclick){
4.  
   isclick = false;
5.  
   //下面添加需要执行的事件
6.  
   ...
7.  
   }
8.  
   }

• 防止重复点击（设置定时器）

1.  
   var isclick= true;
2.  
   function click(){
3.  
   if(isclick){
4.  
   isclick= false;
5.  
   //下面添加需要执行的事件
6.  
   ...
7.  
    
8.  
   //定时器
9.  
   setTimeout(function(){
10.  
    isclick = true;
11.  
    }, 500);
12.  
    }
13.  
    }

• 防抖动

1.  
   /*防抖函数，通过推迟每次事件执行的时间来减少不必要的查询
2.  
   *handler:要执行的方法
3.  
   *delay：每次事件执行的推迟时间(毫秒)
4.  
   */
5.  
    
6.  
   function debounce(handler, delay) {
7.  
   var timer;
8.  
    
9.  
   return function () {
10.  
    var self = this, arg = arguments;
11.  
     
12.  
    clearTimeout(timer);
13.  
     
14.  
    timer = setTimeout(function () {
15.  
    handler.apply(self, arg)
16.  
    }, delay)
17.  
    }
18.  
    }
19.  
     
20.  
    function showAll(e) {
21.  
    console.log(e.target)
22.  
    console.log('执行查询操作', new Date().getTime())
23.  
    }
24.  
     
25.  
    var searchInput = document.getElementById('search');
26.  
    searchInput.addEventListener('keyup', debounce(showAll, 500), false)

• 节流函数

1.  
   /*节流函数，通过控制每次事件执行的时间间隔控制短时间多次执行方法
2.  
   *handler:要执行的方法
3.  
   *wait：每次点击事件执行的时间间隔(毫秒)
4.  
   */
5.  
    
6.  
   function throttle(handler, wait) {
7.  
    
8.  
   var lastTime = 0;
9.  
    
10.  
    return function () {
11.  
     
12.  
    var nowTime = new Date().getTime();
13.  
     
14.  
    if (nowTime - lastTime > wait) {
15.  
    handler.apply(this, arguments);
16.  
    lastTime = nowTime;
17.  
    }
18.  
     
19.  
    }
20.  
    }
21.  
     
22.  
    // 提交方法
23.  
    function ajaxForm(e) {
24.  
    console.log(e.target)
25.  
    console.log('执行提交操作', new Date().getTime())
26.  
    }
27.  
     
28.  
    var subBtn = document.getElementById('submit');
29.  
    subBtn.addEventListener('click', throttle(ajaxForm, 1000), false)

• 表单防重复提交

1.  
    
2.  
   form action="" onsubmit="return dosubmit()" method="post">
3.  
   <input1>
4.  
   <input2>
5.  
   ...
6.  
   <input type="submit" value="提交" id="submit">
7.  
   </form>
8.  
    
9.  
   var isCommitted = false;//表单是否已经提交标识，默认为false
10.  
    function dosubmit(){
11.  
    if(isCommitted==false){
12.  
    isCommitted = true;//提交表单后，将表单是否已经提交标识设置为true
13.  
    return true;//返回true让表单正常提交
14.  
    }else{
15.  
    return false;//返回false那么表单将不提交
16.  
    }
17.  
    }