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

• 防止重复点击

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

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

var isclick= true;
function click(){
    if(isclick){
        isclick= false;
        //下面添加需要执行的事件
            ...
 
        //定时器
        setTimeout(function(){ 
            isclick = true;
        }, 500);
    }
}

• 防抖动

/*防抖函数，通过推迟每次事件执行的时间来减少不必要的查询
 *handler:要执行的方法
 *delay：每次事件执行的推迟时间(毫秒)
 */
 
function debounce(handler, delay) {
    var timer;
 
    return function () {
        var self = this, arg = arguments;
 
        clearTimeout(timer);
 
        timer = setTimeout(function () {
            handler.apply(self, arg)
        }, delay)
    }
}
 
function showAll(e) {
    console.log(e.target)
    console.log('执行查询操作', new Date().getTime())
}
 
var searchInput = document.getElementById('search');
searchInput.addEventListener('keyup', debounce(showAll, 500), false)

• 节流函数

/*节流函数，通过控制每次事件执行的时间间隔控制短时间多次执行方法
 *handler:要执行的方法
 *wait：每次点击事件执行的时间间隔(毫秒)
 */
 
function throttle(handler, wait) {
 
    var lastTime = 0;
 
    return function () {
    
        var nowTime = new Date().getTime();
 
        if (nowTime - lastTime > wait) {
            handler.apply(this, arguments);
            lastTime = nowTime;
        }
 
    }
}
 
// 提交方法
function ajaxForm(e) {
    console.log(e.target)
    console.log('执行提交操作', new Date().getTime())
}
 
var subBtn = document.getElementById('submit');
subBtn.addEventListener('click', throttle(ajaxForm, 1000), false)

• 表单防重复提交

        
form action="" onsubmit="return dosubmit()" method="post">
    <input1>
    <input2>
    ...
    <input type="submit" value="提交" id="submit">
</form>

         var isCommitted = false;//表单是否已经提交标识，默认为false
         function dosubmit(){
              if(isCommitted==false){
                    isCommitted = true;//提交表单后，将表单是否已经提交标识设置为true
                    return true;//返回true让表单正常提交             
				}else{
				    return false;//返回false那么表单将不提交
             }
        }