函数防抖概念简述
当持续触发事件时，一段时间内只能触发一次。将几次操作合并为一此操作进行。比如说有一条赛车通道，赛车通过的时间为5s，5s之后到达终点，执行领奖操作。
这5s之内只允许一辆赛车在通道内，如果第一辆赛车还在通道内，此时第二辆赛车已经进来了，那么销毁第一辆赛车，从第二辆车入场重新计时5s执行领奖操作。
经典应用场景
<input placeholder="请输入电话" type="number"/>
此input框需要进行一个即时查询，所以需要实时监听用户在input输入的值。拿到值后发送请求给后台，返回数据进行电话匹配。
let telInput = document.querySelector('input'); telInput.addEventListener('input', function(e) { //如果直接每次发请求，会导致性能问题 //数据请求 $.ajax({}) })
此时存在的问题是，如果这个过程中不断的发送请求，当请求过多、数据量过大时，浏览器很容易卡死或者崩溃，服务器也处理不过来。
此时就要进行函数防抖的处理，如下:
let telInput = document.querySelector('input'); telInput.addEventListener('input', function(e) { //如果直接每次发请求，会导致性能问题 //数据请求 let timeOut = null; if(timeOut){ clearTimeout(timeOut) }else{ timeOut = setTimeout(()=>{ $.ajax({}) },2000) } })
此时，当监听到用户输入时，就会进行判断，如果用户输入第一个字符与第二个字符的时间间隔小于2s，那么从第二个字符开始重新计时。当用户停下来了，2s过后请求数据。
当然，我们还可以封装一下，如下:
//fn(方法),wait(等待时间) 都是参数 调用传进来就可 function antiShake(fn, wait) { let timeOut = null; return args => { if (timeOut) clearTimeout(timeOut) timeOut = setTimeout(fn, wait); } }
调用
let telInput = document.querySelector('input'); //数据请求方法 function demo(){ $.ajax({}) } telInput.addEventListener('input',antiShake(demo,2000));
函数节流概念简述
当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流，顾名思义，节制流入或流出。比如说水龙头放水，一旦打开开关，水流就会很快，我们要做的就是限制流出。
经典应用场景
移动端touch事件
<div class="box"></div> <script> let box= document.querySelector('.box'); box.addEventListener("touchmove", function (e){ //do something //ajax({}) //... }) </script>
如果直接用以上的写法，touchmove里的方法或事件，会一直执行，只要手指发生了移动，就会执行。
即使手指移出了 原来的target 元素，但是touchmove 仍然会被一直触发，而且 target 仍然是原来的 target 元素。
touchmove事件会多次重复触发，由于移动端计算资源宝贵，尽量保证事件节流。
那么，思路是怎么样的呢？
把整个事件处理器比喻成客运站，如果客运大巴到站就走，那么路上肯定会发生交通拥堵，而且车大部分是空的，因为没给时间上客，虚假繁忙的情况肯定是不好的，那么怎么处理呢？
设置一个时间间隔，时间间隔内只允许执行一次，客运站大巴设定一个时间，到点才会走。
let time = null; box.addEventListener("touchmove", function (e){ if(!time){ time = setTimeout(()=>{ //do something //ajax({}) //... time = null; },1000) } })
同样的，为了方便，可以封装一下
function throttle(event, time) { let timer = null //timer状态要常驻内存，这里做了一个闭包 return function() { if (!timer) { timer = setTimeout(() => { event(); timer = null }, time) } } }
调用
function demo(){ //do something //ajax({}) //... } box.addEventListener("touchmove",throttle(demo,2000));
当然，还有第二种办法，通过时间戳
let throttle = function(func, delay) { let prev = Date.now(); return function() { var context = this; var args = arguments; var now = Date.now(); if (now - prev >= delay) { func.apply(context, args); prev = Date.now(); } } } function demo() { //do something //ajax({}) //... } box.addEventListener('touchmove', throttle(demo, 2000));
FAQ
大家很容易混淆函数防抖与节流的概念，一句话总结:
节流是把一定时间内的多个事件合为一个
防抖是固定的时间内，事件只允许发生一次
讲的很详细了，如对大家有帮助，欢迎评论转发。如果有错误，敬请指正。
