在项目开发过程中经常遇到在input的change事件中发起请求，将用户最新输入的字符作为data传给后台，但是如果用户的输入频率过高，或者用户输入的字符还未拼成一个完整的字词，这时候发起请求会浪费网络资源，使页面卡顿。
这时候我们就用到了函数去抖（debounce）和函数节流（throttle），首先来看一下概念:
1,函数去抖(又称防抖)
在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
未优化前代码demo:
<input id="debounceTest" />
<script> function ajax(value) { console.log(value+'-----------发起ajax请求') } let inputa = document.getElementById('debounceTest') inputa.addEventListener('keyup', function (e) { ajax(e.target.value) }) </script>
效果图：
从页面中可以看到，只要触发了keyup时间，页面就会发起请求，不管用户是否输入了一个完整的字符，这样对网络资源十分浪费，在移动端甚至可能造成用户体验不流畅，系统卡顿，所以我们来对代码进行优化，如下：
优化后代码demo：
function ajax(content) { console.log(content+'---------------ajax请求') } function debounce(fun, delay) { return function (args) { let that = this let _args = args clearTimeout(fun.id) fun.id = setTimeout(function () { fun.call(that, _args) }, delay) } } let inputb = document.getElementById('debounce') let debounceAjax = debounce(ajax, 500) inputb.addEventListener('keyup', function (e) { debounceAjax(e.target.value) })
页面效果：
可以看出，当用户一直在输入时，页面不会发起请求，当用户的上次输入与下次输入有一定时间间隔时，页面才会发起请求。
同样的问题还有另一种解决方法：
2，函数节流(throttle)
规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。
还是上边的例子，这次用节流的方法实现
节流后的代码demo:
function throttle(fun, delay) { let last, deferTimer return function (args) { let that = this let _args = arguments let now = +new Date() if (last && now < last + delay) { clearTimeout(deferTimer) deferTimer = setTimeout(function () { last = now fun.apply(that, _args) }, delay) }else { last = now fun.apply(that,_args) } } } let throttleAjax = throttle(ajax, 1000) let inputc = document.getElementById('throttle') inputc.addEventListener('keyup', function(e) { throttleAjax(e.target.value) })
页面效果：
可以看出，不管用户的输入速度是多少，页面总是以恒定的间隔向后台发起请求。
函数节流还可以应用于其他事件，比如mouse移动事件，页面滚动事件，resize事件等能高频次触发的事件中。
函数节流和去抖都是为了解决事件触发频率过高的问题，但是使用了不同的原理
节流是总是以固定的间隔发起请求，对高频率事件做做次数限制。去抖是固定时间段内只发送一次请求。对高频率事件做做次数限制
以上为节流去抖的全部内部，如有错误还望指正。