1. 函数节流（throttle）
让一个函数不要执行得太频繁，减少一些过快的调用来节流, 降低促发调用的频率
(1)节流的应用场景
- DOM 元素的拖拽功能实现（mousemove）
- 计算鼠标移动的距离（mousemove）
- Canvas 模拟画板功能（mousemove）
- 搜索联想（keyup）
- 监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次
2. 函数去抖（debounce）
是对于一定时间段的连续的函数调用，只让其执行一次
(1)去抖的应用场景
- 每次 resize/scroll 触发统计事件
- 文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，验证一次就好）
<label for="username">
用户名: <input type="text" id="username" name="username">
</label>
<script>
let username = document.getElementById('username'),
timer =null,
starttime = null;
username.onkeyup = function(){
clearTimeout(timer);
let curtime = Date.now();
if(!starttime){
starttime = curtime;
}
if(curtime - starttime > 800){
console.log(username.value);
starttime = curtime;
}else{
timer = setTimeout(function(){
console.log(username.value);
},500)
}
}
就算一直没有停止编辑，也会在指定时间后进行事件的触发
原理
当一些操作在没有间断的情况重复连续执行，触发指定的事件，比如keyup,onresize，设置一个定时器，先进行清楚操作，再指定延时来触发定时器里的操作，比如调用一个函数去进行ajax请求，
但是因为触发keyup之类的事件太过频繁，时间间隔小于定时器的延时时间，就会在定时器执行之前再次执行keyup的事件，导致前一个定时器被清除，达到减少定时器里函数执行次数的作用
当我触发一个事件时，先setTimout让这个事件延迟一会再执行，如果在这个时间间隔内又触发了事件，那我们就clear掉原来的定时器，再setTimeout一个新的定时器延迟一会执行
标准的函数节流的input输入的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>throttle函数节流</title>
</head>
<body>
请输入:<input type="text" id="printinput">
<script>
function print(text){
console.log('------------------------------------');
console.log("打印的是:",text);
console.log('------------------------------------');
}
let printinput = document.getElementById('printinput');
printinput.addEventListener('keyup',function(){
throttle(print,null,this.value,1000,500);
/*throttle参数介绍
* print ,用来被触发的函数，比如ajax请求
* context print函数的执行上下文,也就是print函数的this指向
* text 也就是输入的内容
* between 执行被触发的函数隔多少毫秒必须被执行一次
* delay 用来指定定时器延时时间，时间之内的连续操作不会触发目标函数
*/
},false);
function throttle(fn,context,text,between,delay){
clearTimeout(fn.timer);
fn._cur = Date.now();
if(!fn._start){
fn._start = fn._cur;
}
/*通过对上一次强制触发函数的时间
* 与当前事件执行时的时间比较，
* 当大于给定between就执行一次目标操作
*并将当前时间赋值给上一次强制触发函数时间
* 进行时间更新
*/
if(fn._cur - fn._start > between){
fn.call(context,text);
fn._start = fn._cur;
}else{
fn.timer = setTimeout(function() {
fn.call(context,text);
}, delay);
}
}
</script>
</body>
</html>
函数节流和函数去抖的核心其实就是限制某一个方法被频繁触发，而一个方法之所以会被频繁触发，大多数情况下是因为 DOM 事件的监听回调
一个是间隔时间段触发」，「一个是只触发一次
