js节流和防抖
1、概念
节流函数是指一定时间内方法只执行一次。
防抖函数是指一定时间内，事件被频繁触发，但只执行一次。
ps：光看概念我自己也一脸懵比，直接上代码。
2、代码的简单实现
（1）节流函数（throttle）
节流函数的实现方法有两种方式：
①利用外部变量
var canRun = true;
window.onresize = function() {
if (!canRun) {
return;
}
canRun = false;
setTimeout(function() {
console.log(1);
canRun = true;
}, 300);
};
我们设置了一个外部变量canRun,如果canRun为false，就直接return，反之则打印1.我们设置一个外部变量的目的就是想知道上一次的代码是否运行完，如果运行完就进入下一次的周期，没有的话就直接return.
②利用时间戳
var lastTime = 0;
window.onresize = function() {
var nowTime = new Date().getTime();
if (nowTime - lastTime > 500) {
console.log(1);
lastTime = nowTime;
}
};
利用时间戳其实跟上面的差不多，大家自己理解下（奸笑ing。。。）
（2）防抖函数（debounce）
var timer = null;
window.onresize = function() {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function() {
console.log(1);
}, 300);
};
我们可以看到我们设置了一个timer，然后把定时器赋给了timer，如果窗口一直在变化，那么定时器就会一直被清除，而不会运行，只有当你停止变化的时候，才会打印1.
（3）总结
其实看完代码相信大家对节流和防抖应该有一定理解了。如果举个生活中的例子的话，
节流就相当于拧紧水龙头，水一滴一滴的留下来；而防抖的话就像弹簧，我一直按着它，只有当我松开的时候它才会弹起。
3、应用场景
我们平常写代码途中会用到他们的地方有以下几种：
节流：监听窗口变化，滚动，鼠标移动等等
防抖：验证input输入框，当用户停止输入的时候才验证
以上就是小弟给你分享的内容，欢迎来踩！！！
