关于节流和防抖，这篇文章说的很好了，深入lodash源码分析防抖和节流
深入篇 | Lodash 防抖和节流是怎么实现的
但是不利于我们理解不使用lodash的节流和防抖，这里我总结了一下我所理解的节流和防抖函数以及用法。
函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。
防抖：优化页面请求性能（公交司机会等人都上车后才出站）
在函数需要频繁触发情况时，只有足够空闲的时间，才执行一次。
debounce lodash链接
search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
var oInp = document.getElementById('input');
function ajax (){
console.log(this.value);
}
function debounce (handler, wait) {
var timer = null;
return function() {
var _self = this, _arg = arguments;
clearTimeout(timer);
// 第一时刻不执行，但是最后一次事件触发执行
timer = setTimeout(()=>{
handler.apply(_self, _arg);
},wait)
}
}
oInp.oninput = debounce(ajax, 1000)
节流：优化网络请求性能（水滴攒到一定重量才落下）
预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。
throttle lodash链接
鼠标不断点击触发，mousedown(单位时间内只触发一次)
监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断
var oDiv = document.getElementById('show');
var oBtn = document.getElementById('btn');
function add (e) {
console.log(this,e)
oDiv.innerText = parseInt(oDiv.innerText) +1;
}
function throttle (handler, wait) {
var lastTime = 0;
return function () {
// this 指向
var nowTime = new Date().getTime();
// 第一时刻就执行，但是最后一次事件触发不一定执行
if (nowTime - lastTime > wait) {
handler.apply(this,arguments)
lastTime = nowTime;
}
}
}
oBtn.onclick = throttle(add, 1000)
结合两者优点，可以优化如下
throttle (handler, wait = 300) {
let lastTime = 0, timer = null
return function (...args) {
const nowTime = +new Date();
if (nowTime - lastTime < wait) {
if (timer) clearTimeout(timer);
timer = setTimeout(()=>{
lastTime = nowTime;
handler.apply(this, args);
},wait)
} else {
lastTime = nowTime;
handler.apply(this, args)
}
}
}
欢迎讨论
