防抖和节流

待我称王封你为后i 2022-08-30 11:37 225阅读 0赞

# 防抖 #

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。  
触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

**简单来解释就是，，假如此时有一辆大巴车，规定只要在n秒后没人上车司机就发车，但要是在n秒之内，有人上了车，就会重新计算时间**。

<div id="show">0</div>
    <button id="btn">click me</button>
    
    
    var inp = document.getElementById("inp");
    
    function debounce(fn,wait){ 
    	var timer = null;
    	return function(...args){ 
    		clearTimeout(timer)
    		timer = setTimeout(()=>{ 
    			fn(...args)
    		},wait)		
    	}
    }
    function ajax(e){ 
    	console.log(e.target.value)
    }
    var _ajax = debounce(ajax,1000)
    inp.oninput = _ajax;

# 节流 #

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。  
高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

**简单来解释，假如此时有一辆大巴车，就是司机规定n秒之后发车，不管之后还没有人上车，都是n秒后发车。**

<div id="show">0</div>
    <button id="btn">click me</button>
    
    
    var inp = document.getElementById("inp");
    function throttle(fn,wait){ 
    	var timer = null;
    	return function(...args){ 
    		if(!timer){ 
    			timer = setTimeout(()=>{ 
    				fn(...args)
    				timer = null;
    			},wait)
    		}
    	}
    }
    
    function ajax(e){ 
    	console.log(e.target.value)
    }
    var _ajax = throttle(ajax,1000)
    inp.oninput = _ajax;

### 使用时间戳实现节流 ###

// 通过使用时间戳的方式来实现节流
            var oDiv = document.getElementById("show");
            var oBtn = document.getElementById('btn');
    
          
            function buy() { 
                oDiv.innerHTML = parseInt(oDiv.innerHTML) +1;
            }
    
            oBtn.onclick = throttle(buy,1000);
    
            // 通过使用时间戳的方式来实现节流
            function throttle(handle,wait){ 
                var lastTime = 0;
                return function(){ 
                    var nowTime = new Date().getTime();
                    if(nowTime - lastTime >wait){ 
                        handle();
                        lastTime = nowTime;
                    }
                }
            }