防抖和节流

防抖

所谓防抖，就是指触发事件后在 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;
                }
            }
        }