一、什么是函数节流（throttle）
概念：限制一个函数在一定时间内只能执行一次。
二、为什么需要函数节流
前端开发过程中，有一些事件或者函数，会被频繁地触发（短时间按内多次触发），最常见的例如，onresize，scroll，mousemove ,mousehover 等，这些事件的触发频率很高，不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很耗费性能的），那不仅会造成计算机资源的浪费，还会降低程序运行速度，甚至造成浏览器卡死、崩溃。这种问题显然是致命的。
除此之外，重复的 ajax 调用不仅可能会造成请求数据的混乱，还会造成网络拥塞，占用服务器带宽，增加服务器压力，显然这个问题也是需要解决的。
三、函数节流的代码实现
（1）方法一：时间戳方案
// 时间戳方案
function throttle(fn,wait){
var pre = Date.now();
return function(){
var context = this;
var args = arguments;
var now = Date.now();
if( now - pre >= wait){
fn.apply(context,args);
pre = Date.now();
}
}
}
function handle(){
console.log(Math.random());
}
window.addEventListener("mousemove",throttle(handle,1000));
（2）方法二：定时器方案
function throttle(callback, wait){
//定义开始时间
let start = 0;
//返回结果是一个函数
return function(e){
//获取当前的时间戳
let now = Date.now();
//判断
if(now - start >= wait){
//若满足条件, 则执行回调函数
callback.call(this, e);
//修改开始时间
start = now;
}
}
}
window.addEventListener('scroll', throttle(function(e){
// console.log(Date.now());
console.log(e);
}, 500));
四、函数节流的使用场景
到此为止，相信各位应该对函数节流有了一个比较详细的了解，那函数节流一般用在什么情况之下呢？
懒加载、滚动加载、加载更多或监听滚动条位置；
百度搜索框，搜索联想功能；
防止高频点击提交，防止表单重复提交；
五、函数的防抖
代码如下：
debounce(callback, time){
//定时器变量
let timeId = null;
//返回一个函数
return function(e){
//判断
if(timeId !== null){
//清空定时器
clearTimeout(timeId);
}
//启动定时器
timeId = setTimeout(() => {
//执行回调
callback.call(this, e);
//重置定时器变量
timeId = null;
}, time);
}
}
let input = document.querySelector('input');
// input.onkeydown = function(e){
// console.log(e.keyCode);
// }
input.onkeydown = debounce(function(e){
console.log(e.keyCode);
}, 1000);
