js函数节流和函数防抖的作用

人生一世，草木一秋。
非淡泊无以明志,非宁静无以致远。下面开始我们今天的内容《函数节流和函数防抖》



在行走江湖的过程中，会出现很多性能优化的问题来让你手足无措。那么，我们今天就找了比较常见的“节流和防抖”两种性能优化问题进行讲解。嗯，相信很多人也都遇到过这种情况。没错，接下来，我们就针对这两个问题来为你答疑解惑。

函数节流

节流呢，就是优化高频率执行js代码的一种手段。大家都知道oninput,onkeypress,onscroll,resize等事件触发频率非常高，那么如果在这些事件触发时执行代码，就会相应的将代码块执行很多次。但是通常大量的重复执行是没有必要的，比如说大家非常熟悉的搜索引擎的联想查询功能。它是在用户进行键入的同时进行的ajax数据请求。但是键盘事件触发的频率是按照字母来计算的，不是按照汉字或者单词，如果是每键入一个字母都触发一次数据请求，就非常的低效。在这种情况下，我们就有必要降低这种操作的频率，保证一定时间内，核心代码只执行一次。这样在核心代码块比较沉重的时候，就会大大提升我们的性能了。

类比到咱们生活中的例子。高频事件就像一个大开的水龙头，水流源源不断大量流出，就像代码在不断执行。这是对资源的一种浪费。我们要通过节流，把水龙头拧紧一点，让它流水的频率降低，但是每一段时间都能滴下一滴水，从而节省资源。

节流就是这样的一种优化思想。（讲代码）（分析代码）

一句话总结：节流就是保证一段时间内只执行一次核心代码

函数防抖

节流的效果非常好，但是防抖也是一项必备技能，那么在下就来说一下防抖吧！
防抖其实就是搜索功能的实现。。。。。

这就是在下理解的防抖，各位，献丑了。。。

3. 应用场景

不戒和尚：不愧都是江湖老怪，和尚我佩服，那么我就根据两位的讲解，来说一下他们的应用场景吧.....适用场景：
节流：
下拉加载...

防抖：
搜索功能...

面试问题：
问: 项目中做过哪些？
回答：性能优化

函数节流：
让一个函数不要执行得太频繁，减少一些过快的调用来节流。

核心就是：
让一个函数不要执行得太频繁，减少一些过快的调用来节流。

防抖：

事件保持触发，一定时间内没有触发

核心：在一定时间段的连续函数调用，只让其执行一次
追问：在什么项目用到过？

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

节流应用场景：

滚动浏览器滚动条的时候，更新页面上的某些布局内容或者去调用后台的某接口查询内容。
同样的，如果不对函数调用的频率加以限制的话，那么可能我们滚动一次滚动条就会产生N次的调用了。
但是这次的情况跟上面的有所不同，我们不是要在每完成等待某个时间后去执行某函数，而是要每间隔某个时间去执行某函数，避免函数的过多执行。


那么今天有关于节流和防抖的讲解就到这里。