最近又回去重新看了一下函数的节流和防抖，发现之前的理解可能有些偏差，也去网上搜索了一下相关文章，感觉好多都讲的有点模糊，根据自己的理解重新整理了一下。

防抖（Debounce）和节流 （Throttle） 都是用来控制某个函数在一定时间内执行次数的多少以优化高频率执行js代码的一种技巧，两者相似而又不同。

一、概念

函数防抖（debounce）是指在一定时间内，在动作被连续频繁触发的情况下，动作只会被执行一次，也就是说当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间，所以短时间内的连续动作永远只会触发一次，比如说用手指一直按住一个弹簧，它将不会弹起直到你松手为止。

函数节流是指一定时间内执行的操作只执行一次，也就是说即预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期，一个比较形象的例子是如果将水龙头拧紧直到水是以水滴的形式流出，那你会发现每隔一段时间，就会有一滴水流出。

函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

比如如下的情况：

window对象的resize、scroll事件

拖拽时的mousemove事件

文字输入、自动完成的keyup事件

二、应用场景

1、函数防抖

假设我们网站有个搜索框，用户输入文本我们会自动联想匹配出一些结果供用户选择。我们可能首先想到的做法就是监听keyup事件，然后异步去查询结果。这个方法本身是没错的，但是如果用户快速的输入了一连串的字符，假设是10个字符，那么就会在瞬间触发了10次的请求，这无疑不是我们想要的。我们想要的是用户停止输入的时候才去触发查询的请求，这时候防抖函数就可以帮到我们。

具体的实现如下：

<input type="text" id="s" list="suggestion" name="">
<datalist id="suggestion"></datalist>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fapps.bdimg.com%2Flibs%2Fjquery%2F2.1.4%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20(function(%24)%20%7B%0A%20%20%20%20var%20%24s%20%3D%20%24('%23s')%3B%0A%20%20%20%20var%20%24suggestion%20%3D%20%24('%23suggestion')%3B%0A%20%20%20%20var%20timer%20%3D%20null%3B%0A%20%20%20%20%24s.on('keyup'%2C%20function()%20%7B%0A%20%20%20%20%20%20timer%20%26%26%20clearTimeout(timer)%3B%0A%20%20%20%20%20%20timer%20%3D%20setTimeout(handleChange%2C%20500)%3B%0A%20%20%20%20%7D)%3B%0A%20%20%20%20function%20handleChange()%20%7B%0A%20%20%20%20%20%20var%20s%20%3D%20%24s.val()%3B%0A%20%20%20%20%20%20%24suggestion.empty()%3B%0A%20%20%20%20%20%20fetchBaiduSuggest(s%2C%20function(word%2C%20result)%20%7B%0A%20%20%20%20%20%20%20%20result.map(function(w)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%24('%3Coption%20%2F%3E').val(w).text(w).appendTo(%24suggestion)%3B%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D%0A%20%20%20%20function%20fetchBaiduSuggest(word%2C%20cb)%7B%0A%20%20%20%20%20%20%24.getJSON(%22http%3A%2F%2Fsuggestion.baidu.com%2Fsu%3Fwd%3D%22%2BencodeURIComponent(word)%2B%22%26cb%3D%3F%22%2Cfunction(data)%7B%0A%20%20%20%20%20%20%20%20if(%24.isArray(data.s))%7B%0A%20%20%20%20%20%20%20%20%20%20cb(word%2Cdata.s)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D%0A%20%20%7D)(jQuery)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

代码写的比较粗陋，基本完成效果。你也可以猛戳这里查看在线demo.

2、函数节流

如果我们现在需要做一个记录用户鼠标移动轨迹的小应用，像这种对流畅度有一定的要求的情况，再用上面的防抖函数就不合适了，如果用防抖函数会出现什么效果呢？如果鼠标移动速度较快，那么只有在我们每次鼠标停下来的时候才能发送当前的位置，但是如果我们每次移动都发送并记录鼠标的位置，那也是相当恐怖的，鼠标随便移动一下就会有成百上千条记录位置的请求发出去，这个时候我们就可以用到函数节流，节流顾名思义也就是个一段儿时间去发送一次位置，可以大大减少请求发送次数。

具体实现：

<div>X:<span id="x"></span></div>


<div>Y:<span id="y"></span></div>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fapps.bdimg.com%2Flibs%2Fjquery%2F2.1.4%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20(function(%24)%20%7B%0A%20%20%20%20var%20%24x%20%3D%20%24('%23x')%3B%0A%20%20%20%20var%20%24y%20%3D%20%24('%23y')%3B%0A%20%20%20%20var%20canRun%20%3D%20true%3B%0A%20%20%20%20%24(document).on('mousemove'%2C%20function(event)%20%7B%0A%20%20%20%20%20%20var%20e%20%3D%20event%20%7C%7C%20window.event%3B%0A%20%20%20%20%20%20if%20(!canRun)%20%7B%0A%20%20%20%20%20%20%20return%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20canRun%20%3D%20false%3B%0A%20%20%20%20%20%20setTimeout(function()%7B%0A%20%20%20%20%20%20%20%24x.text(e.pageX)%3B%0A%20%20%20%20%20%20%20%24y.text(e.pageY)%3B%0A%20%20%20%20%20%20%20canRun%20%3D%20true%3B%0A%20%20%20%20%20%20%7D%2C%20100)%3B%0A%20%20%20%20%7D)%3B%0A%20%20%7D)(jQuery)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

这里没有具体的发送请求去记录，只是显示了当前的位置，你可以猛戳这里查看在线demo，作为对比这里使用防抖函数的方式实现了相同的功能，你也可以猛戳这里查看他们的区别