另附内容：
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
_.debounce(func, [wait=0], [options=])
如何使用
引入
import _ from 'lodash';
methods中clicktest方法
clicktest:_.debounce(function(){
console.log('政哥哥过过过过过')
},1000),
_.throttle(func, [wait=0], [options=])
原网址：https://segmentfault.com/a/1190000018445196
目的：当多次执行某一动作，进行函数调用次数的限制，节省资源
防抖：在事件触发n秒后执行函数，如果在n秒内再次出发，重新计时
节流：当多次执行某一动作，每个一段时间，只执行一次函数。
防抖函数（普通）
var timer; //全局的timer，只有一个
function debounce(fn,delay){
if(timer){
clearTimeout(timer) //保证只开启一个定时器
}
timer = setTimeout(function(){
fn(); //延迟delay，执行函数
},delay)
}
window.onscroll = function(){
debounce(test,1000)
}
function test(){
console.log('滚动停')
}
需要将timer封装到debounce中，如果调用的fn有参数需要处理
function debounce(fn,delay){
let timer;
return function(){
let _this = this; //为了改写参数 保存this 应用apply
let _args = arguments; //保存testDebounceFn的入参
if(timer){
clearTimeout(timer);
}
timer = setTimeout(function(){
//apply传参正好和arguments匹配
fn.apply(_this,_args)
},delay)
}
}
let testDebounceFn = debounce(test,1000);
function test(a){
console.log('滚动停 '+a)
}
window.onscroll = function(){
testDebounceFn('aaaa')
}
节流（2种方式setTimeout 或者 new Date()）
//防抖比节流严格，防抖在一定时间操作后只执行一次。节流在一定时间操作，可每隔n秒执行一次
setTimeout方式
function throttle(fn,delay){
let timer;
return function(){
let _args = arguments;
let _this = this;
if(timer){//如果有定时器，退出
return
}
timer = setTimeout(function(){
fn.apply(_this,_args);//定时器结束执行函数
timer = null;//清除定时器，可以再次进入
},delay)
}
}
let testThrottleFn = throttle(test,3000);
function test(a){
console.log('打印 '+a)
}
window.onscroll = function(){
testThrottleFn('bbbb')
}
new Date方式
function throttle(fn,delay){
let previous = 0;
return function(){
let _this = this;
let _argus = arguments;
let now = new Date();
//不同时间取值的new Date()是可以相减的
if(now-previous>delay){
fn.apply(_this,_argus);
previous = now;
}
}
}
let testThrottleFn = throttle(test,2000);
function test(b){
console.log('出现 '+b)
}
window.onscroll = function(){
testThrottleFn('8888')
}
函数防抖的应用场景
连续的事件，只需触发一次回调的场景有：
搜索框搜索输入。只需用户最后一次输入完，再发送请求
手机号、邮箱验证输入检测(change、input、blur、keyup等事件触发，每次键入都会触发)
窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。
鼠标的mousemove、mouseover
导航条上，用户不停的在导航区域滑动相当于
函数节流的应用场景
间隔一段时间执行一次回调的场景有：
滚动加载，加载更多或滚到底部监听，window.onscroll和滑到底部自动加载更多
谷歌搜索框，搜索联想功能
高频点击提交，表单重复提交
网友评论