防抖和节流

防抖
例如 页面scroll，resize(无法控制触发频率)

var timer = false;
window.onScroll = function() {
if(timer){
clearTimeout(timer);
}
timer = setTimeout( () => {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollTop);
},1000)
}

在页面滚动的时候一秒内没有再次滚动页面的话才会执行获取滚动距离的方法；

节流
例如 input事件（在react中change事件和原生input事件效果相同）请求数据

var changeStatus = true;
window.inputChange = function() {
if(!changeStatus){
console.log('等待节流事件结束再次触发')
return；
}
changeStatus = false;
setTimeout( () => {
console.log('1秒内我执行一次，多次触发对我没有效果');
},1000)
}

input连续输入时，在一秒内只会执行一次定时方法中的代码，在一秒钟之后会再次执行一次，此方式能够很好的优化我们前端连续多次请求效果。