同很多人一样，起初我对函数防抖和节流的概念很模糊，但经过我一番学习之后，分享一下我的学习心得。
概念
函数防抖：延迟要执行的动作， 若在延迟时间内动作再次被触发，取消 之前开启的动作，则重新开始计时，重新触发。
例子： 若电脑休眠时间是一分钟， 如果在这期间我们动了鼠标，他又会重新开始计时，一分钟再休眠。
实现： 定时器。
应用： 搜索框搜索
函数节流： 设定一个特定的时间，让函数在特定的时间内只执行一次，不会频繁执行
实现： 定时器
应用： 鼠标滚轮滚动
实战
函数防抖：搜索框。每一次输入都会发出请求，实现在我们输入完成后请求。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="input">
</body>
<script>
var timer;
document.getElementById('input').onkeyup = function() {
// 每次触发先清空上次的动作， 重新开始
clearTimeout(timer);
// 延时300ms执行
timer = setTimeout(function() {
console.log(111);
}, 200)
}
</script>
</html>
函数节流：鼠标滚动， 滚动鼠标会一直触发鼠标滚动时间， 我让它2s内多次触发只执行一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
<div>yumang is a good man</div>
</body>
<script>
var flag = true;
document.body.onscroll = function() {
// 隔2s再执行
if (flag) {
// 第一次触发要执行。
console.log(111);
flag = false
// 2s之后再打开开关， 实现了一段时间内只执行一次
timer = setTimeout(function(){
flag = true;
}, 2000)
}
}
</script>
</html>
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)